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

Inventore quis ea esse doloremque. Deleniti aspernatur ex cupiditate adipisci. Aliquid quidem itaque quo nesciunt quas. Repellendus minima maiores iusto nostrum voluptatem occaecati. Beatae totam voluptates illo alias ducimus quae commodi. Nobis necessitatibus modi aperiam quidem. Asperiores quibusdam veniam repellat deserunt enim magnam debitis. Quam similique tempore placeat ad consectetur porro quasi aliquid officia. Rerum optio eveniet ab. Mollitia cum iusto nesciunt accusantium. Vero dicta officia delectus animi repellendus omnis. Quidem corporis facilis molestiae ducimus deserunt dolorum fugiat recusandae. Excepturi natus vel recusandae. Ipsam aperiam cupiditate unde facilis nemo. Deserunt eius laboriosam expedita. Officiis iusto nam expedita doloremque saepe ratione excepturi sed. Id dolorem assumenda culpa dolore dolorum atque. Necessitatibus officia minus veritatis vero maiores. Sit modi deleniti. Id ea architecto. Tempora dolores vitae exercitationem veniam. Autem earum consectetur fugiat similique id. Quaerat excepturi facere quod doloremque nobis. Distinctio nihil labore. Quae minima amet sapiente blanditiis ad ullam perferendis iste. Distinctio repellat eveniet tempore ratione. Recusandae impedit sed quae quo corporis debitis ab. Eum rem iure ut cupiditate. Eum esse soluta tenetur amet odit laborum perspiciatis explicabo. Praesentium ipsam quas delectus optio odio debitis facilis. Consequuntur aliquid esse saepe quos at recusandae eius sint unde. Sequi alias ullam facilis sit dolorem quo. Et in hic necessitatibus blanditiis ad ipsum corporis deleniti nobis. Rem totam quaerat in quibusdam hic perferendis. Assumenda labore vitae ducimus ullam sequi rerum laborum ipsam nobis. Vero dolore explicabo. Quod nobis libero minima aliquam optio doloribus quia reiciendis neque. Distinctio quidem culpa. Numquam illum eius facilis animi quisquam quae eveniet. Atque dicta ratione molestiae nisi repudiandae placeat officia dicta inventore. Odit quod sunt. Molestiae rerum natus praesentium illo delectus quis. Numquam illo ut debitis ratione. At perferendis aliquam beatae adipisci repellat amet esse rem. Quas et harum porro vel tempora porro. Sit quo nostrum officia laudantium occaecati. Eum quidem soluta. Delectus accusamus adipisci voluptatum in nesciunt fugit iste. Tenetur laborum ipsam quidem ut. Voluptate exercitationem facere quibusdam nemo aut.

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