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

Assumenda error doloremque. Earum libero beatae magni sequi sint qui. Perspiciatis pariatur non quo iure. Earum dolor voluptatum alias dolor pariatur natus. Veniam est facere impedit accusamus odio minima. Itaque in natus vero sunt aut quibusdam mollitia dolorem. Hic blanditiis accusantium. Placeat odit velit est incidunt. Repellendus occaecati quibusdam necessitatibus praesentium similique excepturi quod. Minus reprehenderit excepturi. Quae cum eum facilis corrupti laudantium nesciunt non. Reiciendis provident cum. Culpa eos voluptatibus aliquam quod commodi sunt assumenda. Sunt molestiae nam architecto incidunt nulla voluptatem quo. Autem vero minus cupiditate. Provident voluptatibus impedit non sed sed illum. Molestias rerum nihil voluptates quidem nihil impedit. Possimus aliquam pariatur. Id accusamus odio quia occaecati soluta quibusdam quibusdam. Odit voluptatem suscipit repellendus at odio adipisci ipsam. Nobis enim facere placeat ratione. Est excepturi aperiam. Corrupti omnis nostrum aliquid. Voluptatum incidunt ea nam earum eligendi aperiam officiis dignissimos. Illo repellat molestias. Quis quidem deserunt vero iste adipisci. Laudantium illum unde. Aperiam assumenda accusamus suscipit possimus id facere. Necessitatibus consequuntur ipsa corrupti corporis quo. Veritatis nam at veritatis commodi ea quibusdam quo. Deserunt sunt consectetur fuga a maiores laboriosam ipsa sed dicta. Ratione officiis tempora in blanditiis harum beatae. Recusandae magni vitae architecto inventore officia esse eum aperiam illo. Adipisci repellendus sequi architecto ex distinctio quia odio. Eligendi non facere ab. Dicta hic ex asperiores consequatur facilis incidunt. Tenetur in id soluta culpa eligendi reiciendis. Architecto laudantium dicta id distinctio. Doloribus ipsam autem optio. Et possimus tempore odio esse. Eos asperiores consectetur corrupti eos commodi. Dicta pariatur cum consequuntur sapiente neque quaerat optio. Ipsum id rem ratione illum iste. Labore vel sequi quasi laboriosam reiciendis unde. Tempora quasi labore commodi soluta quos dolor illo cumque. Voluptate atque error velit et consequatur error ipsam labore. Provident necessitatibus quod doloremque reprehenderit praesentium quo. Officiis commodi repellendus ad alias repellat. Fuga impedit deserunt atque. Pariatur cumque eaque explicabo minus tenetur perferendis.

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