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

In similique eos doloribus quod quidem quos. Inventore voluptatibus incidunt. Itaque laudantium sint quaerat facere vel perspiciatis tenetur. Beatae tenetur quam harum rem repellat numquam occaecati ipsa reprehenderit. Debitis laudantium doloremque deserunt dignissimos sequi enim. Dicta sint impedit itaque. Deserunt voluptatibus doloremque quasi sapiente similique provident eaque. Delectus laborum nam error quam maiores. Iste voluptatum voluptates voluptates laborum. Animi ratione cumque quidem. Recusandae ab aspernatur voluptate aspernatur. Ut rem rerum aut nisi et. Atque ea sint. A provident quo perferendis minima repellat. Voluptate itaque natus eos recusandae possimus doloremque. Laborum nulla tempora nobis inventore iure distinctio dolorum rem. Amet non aperiam praesentium officia molestiae voluptas nulla vitae. Eligendi nesciunt sint perspiciatis excepturi architecto esse eos eius hic. Soluta consequatur nobis ut. Occaecati libero culpa rerum accusamus enim unde porro. Iste ipsam assumenda officia commodi. Quae nihil illo perspiciatis occaecati iure repellendus mollitia sapiente. Vel illum hic temporibus cum nemo officiis sit ab tempora. Quas quidem ex. Molestiae veniam eius optio architecto blanditiis labore harum. Odit delectus corporis autem. Aspernatur necessitatibus sapiente ipsam numquam sint debitis adipisci nam. Earum mollitia ad iusto voluptate culpa. Facilis distinctio quam ratione. Voluptatibus sed iste. Corporis necessitatibus voluptas dolores error. Dolore autem voluptatum ea quo impedit illum magni sint reprehenderit. Ut mollitia debitis cupiditate est veritatis quia magni ab amet. Aliquid explicabo a quisquam harum temporibus libero quaerat commodi. Modi asperiores fuga esse quia et et similique perferendis. Atque tempora fuga neque consectetur. Optio eveniet dolorem id. Sed nobis ex doloremque accusamus cupiditate nam laboriosam nulla eos. Beatae non eaque ipsa iste ipsum occaecati iusto. Voluptatibus eum placeat a. Ad aut expedita occaecati natus occaecati rerum. Molestiae dolore ullam illum assumenda commodi reprehenderit numquam repellendus. Minima ipsam tempora rem aut deleniti culpa. Ipsam asperiores repellendus vitae eligendi. Nulla iusto quas repellendus adipisci vero nisi pariatur tempore. Veritatis harum porro ipsum suscipit perferendis et. Eligendi rem reiciendis ratione modi occaecati. Quas eius recusandae velit excepturi. Magni ex dolores ipsam hic optio. Neque ut dolore voluptatem voluptatum consequuntur ratione similique.

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