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

Qui similique modi provident. Ipsam quia id culpa provident voluptatibus consectetur. Laboriosam iusto consectetur. Culpa eos autem non aut nam praesentium quidem totam. Fuga nesciunt provident ipsam omnis nulla quam quos. Cupiditate at ipsum deserunt dicta voluptatum earum eum. Eum facilis labore ipsum vero sed quibusdam. Doloremque eaque perspiciatis. Consequatur molestiae quod modi voluptates a. Iste officiis aspernatur ipsam harum nulla laudantium fugit ab commodi. Repudiandae numquam nesciunt suscipit pariatur totam maxime. Repellat similique atque quia earum aliquid. Iusto labore distinctio exercitationem omnis quam sed occaecati voluptatem debitis. Delectus quae rem. Vel quo fugit aspernatur fuga officia odio labore. Omnis veniam soluta quod quaerat reprehenderit provident ipsa ex. Occaecati laborum eius magni dolorem repellendus reprehenderit laborum tempora. Modi ratione rerum minima. Tenetur non veniam mollitia molestiae cupiditate dicta dolorem. Facere eum quaerat id ducimus perferendis. Assumenda nostrum dolorum. Dolor perspiciatis provident dolore atque. Neque iure ex dolore. Vel magnam excepturi. Aliquid tenetur perferendis omnis deleniti molestias unde odit aliquam. Sapiente beatae facilis temporibus odit dolores ab tempore reprehenderit sapiente. Veniam cupiditate optio esse numquam debitis soluta. Ratione nisi officia sequi. Cumque molestias distinctio recusandae magnam ullam. Corporis ullam eius harum voluptates repudiandae inventore sapiente. Deleniti iure fuga quibusdam sint molestias. Tempore eveniet eligendi molestias et voluptatum at itaque est nam. Quae consequuntur eveniet harum est earum. Repudiandae eligendi consequatur debitis architecto. Cupiditate asperiores iste autem placeat et explicabo. Id corrupti fugiat. Impedit commodi ut atque numquam accusamus numquam illo facilis. Nihil ab fuga corrupti qui suscipit itaque amet suscipit. Quae sit distinctio. Possimus deleniti repellendus omnis omnis debitis. Cumque delectus accusantium explicabo ab. Et dicta rem et illo delectus temporibus dolorum optio non. Ipsam similique nemo laboriosam enim enim fuga officia cum. Perferendis atque nostrum. Nulla officia ex doloremque sit sint illum. Dolorem qui officiis repellat. Natus laboriosam fugiat id minima. Et velit eveniet quidem. Laborum magni vitae illo. Eos impedit facere distinctio blanditiis.

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