Tailwind

Core

Provides a variety of globally scoped styles.

Source Page Source

Body Background

Your app's background is automatically set via a design token class. Adjust your theme's color scheme to customize. This affects both light and dark mode.

css 
body { @apply bg-surface-50-900-token; }

Selection

Selection color is also set via a token class. Try selecting the text in the card element below to preview this styling. Notice how selection color changes depending on the background.

The quick brown fox jumps over the lazy dog.

Try selecting the text above.

Mobile Focus

Interactive elements on mobile will briefly show a focus style when touched. Skeleton adjusts the coloring.

Scrollbars

Skeleton automatically provides custom scrollbar styles in supported browsers. Use .hide-scrollbar to disable scrollbars.

Test Scrolling Here

Rem unde doloribus quasi culpa sequi soluta. Corporis animi eligendi quam mollitia. Inventore doloremque ipsam. Repellendus ullam ab dolorum harum blanditiis. Quas ea deleniti possimus quos. Mollitia cumque optio vitae mollitia eligendi. Explicabo iure minima dolores veritatis molestias iste fugiat totam deleniti. Excepturi accusamus doloribus eveniet illo. Minima quam expedita in ipsam iusto excepturi ea. At voluptates doloremque quam. Consequuntur perferendis impedit aliquam. Sequi temporibus totam commodi repellendus culpa provident hic cumque. Totam rem unde perspiciatis. Asperiores ipsum quidem adipisci nostrum consequatur dolor dicta. Consectetur quae molestias vitae adipisci recusandae officia nulla aliquam. Et asperiores nostrum. Id necessitatibus hic at. Voluptatem provident eveniet sapiente nesciunt sunt soluta delectus facilis. Aut molestiae enim harum. Facilis sequi quae consequatur deserunt. Repudiandae aliquid dolor voluptatum eveniet dicta eum temporibus sint possimus. Doloremque ex facere sapiente. Ullam consequatur aperiam qui facilis minus nemo. Nobis excepturi ea temporibus dolorem. Nulla cum ipsa officiis quibusdam dicta odio eaque sunt. Deleniti et voluptas sapiente itaque aliquam. Nulla veniam enim animi inventore delectus perferendis. Incidunt accusamus eos eaque magnam cupiditate maxime. Omnis unde dolor eligendi rem in. Doloremque omnis voluptas. Numquam id unde expedita asperiores eaque. Reiciendis qui sit eos quas. Natus earum laudantium laboriosam odio quasi nostrum. Suscipit in eaque perferendis eaque magnam omnis libero aliquid. Sint amet ex veritatis facere dolor ut ipsa est. Rem unde doloribus rerum debitis. Ipsum vitae voluptas est assumenda accusantium. Debitis cupiditate magnam eum in veniam molestiae explicabo maiores maxime. Dolorem mollitia quasi illum ea esse eum quas. Suscipit ea inventore eum necessitatibus illo labore saepe. Atque voluptates nemo voluptate repellat nesciunt qui aliquam quod. Fuga tempora quibusdam perspiciatis dicta magnam. Maiores consectetur qui omnis cum. Enim dignissimos nobis sequi temporibus veritatis hic debitis. Quod eum doloribus facere sapiente labore. Assumenda explicabo fugit eos ipsum itaque necessitatibus officia sed odio. Ea iure alias quae fuga. Magni non quia harum iusto reprehenderit. Autem ullam id doloremque facere necessitatibus asperiores saepe. Aspernatur voluptatibus esse.

Dividers

Native hr horizontal rule elements respect your theme settings automatically. Use border size to adjust the width.

Divider Styling

Dividers may be dashed, dotted, or doubled.

Vertical Dividers

Divide columns with the .divider-vertical class. You can apply it with a span tag. Adjust the height as desired.

Left

Right