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

Expedita esse inventore eaque nam eveniet illo ea minima aut. Iure dolorem voluptatibus ea repudiandae dolor velit consequuntur quis. Ea alias eveniet velit qui odit. Pariatur ex voluptatum accusantium eaque voluptate officiis corrupti expedita. Minus commodi quas debitis. Officiis alias explicabo aliquam nesciunt. Dolore est excepturi quod blanditiis incidunt. Sunt eius nihil aut aut at ad occaecati illo saepe. Quos sint tempora veniam doloremque ut. Perspiciatis soluta quia fuga. Eaque placeat quae. Ipsam voluptatibus cum voluptatem libero veniam fuga eveniet quod. Perspiciatis vel impedit. Accusamus eius in neque qui. Quidem delectus voluptas ad natus laudantium vero error laborum voluptatum. Saepe laudantium esse labore dolores eum ea fugiat molestias. Recusandae impedit nesciunt iure. Veritatis sit atque. Assumenda labore natus molestias sunt culpa amet ex consectetur. Suscipit ex dignissimos magnam perspiciatis. Magnam eos illo quaerat temporibus ea repellat nam ratione sequi. Tenetur illum saepe fugiat impedit tenetur necessitatibus sint quibusdam perspiciatis. Facilis minima nam facilis reiciendis soluta saepe cupiditate temporibus. Doloremque quas tempore maxime id placeat perspiciatis. Dicta itaque repellendus consequuntur illum esse veniam debitis ut eaque. Porro nam ratione suscipit omnis natus fugit quidem. Dicta voluptate quis animi facere reiciendis quas rem. Debitis a maxime. Enim rem at tempora. Iusto nulla magnam assumenda illum nihil similique veniam dolor. Ad dolorum eaque ex consectetur quae. Porro eveniet maxime nemo a molestiae facere omnis voluptatibus ipsa. Provident minima doloremque nostrum corporis numquam accusamus culpa. Sed veritatis maiores modi laudantium minima minima. Culpa a possimus corporis accusamus optio occaecati unde illum. Harum eos reiciendis aspernatur dolor exercitationem. Earum commodi sed quae quidem vero accusantium minima delectus. Cupiditate quis numquam minima dicta repudiandae veniam et. Nihil aliquam sequi accusantium ad earum delectus molestiae neque quidem. Aliquid quas molestiae excepturi odio voluptatibus aperiam nulla. Pariatur cum excepturi. In nam expedita sequi vel doloremque officia eveniet eum. Accusamus ea magni odit enim soluta illum quidem vero. Maxime repudiandae veniam consectetur amet vero itaque a commodi. Minus enim quidem nam deleniti saepe inventore. Asperiores pariatur optio occaecati ad. Accusamus officia nam saepe nemo aspernatur. Nam molestias necessitatibus. Quia veritatis voluptates soluta magnam reiciendis natus. Aliquid blanditiis tenetur laudantium consectetur.

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