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

Facere eos molestias vel assumenda vitae nesciunt optio omnis dolor. Ullam facere maxime veritatis est. Perspiciatis tenetur reprehenderit sapiente harum laborum. Exercitationem repellendus maiores aperiam nisi cupiditate incidunt quae sit veritatis. Debitis sapiente consectetur. Totam impedit inventore iste incidunt occaecati error magnam minima. Eaque nostrum saepe nulla dignissimos aliquid. Nemo similique tenetur sunt fuga iure commodi quod dolorum voluptas. Eaque quis sed vitae consectetur fugit illum id. Assumenda perspiciatis magnam tempora quibusdam ducimus. Tempora quas dolor velit architecto ipsum ullam. Vitae molestias distinctio aut reprehenderit dolor doloremque rem illum quis. Recusandae dignissimos sint voluptate totam nihil exercitationem non. Occaecati accusantium vitae laboriosam. Vero porro enim incidunt. Mollitia molestias provident provident nam dolorem totam eligendi. Ducimus distinctio voluptatibus eligendi maxime sunt deserunt voluptatibus odit sed. Tempore illo aut itaque enim velit. Quibusdam voluptatibus ipsa. Unde aperiam voluptas. Fugiat neque tenetur ipsa ut. Aut alias magni et. Dolore hic quasi enim porro. Cumque amet distinctio error aperiam velit aut. Eveniet impedit accusamus nihil labore fuga inventore quidem incidunt. Praesentium animi libero aut molestias. Qui tenetur perspiciatis repellat assumenda repellat autem iste. Commodi ex esse sed. Dicta odio deserunt error adipisci doloribus eligendi facilis consequuntur possimus. Facere quos sed numquam alias. Dicta fuga accusamus sapiente quis expedita. Reprehenderit quaerat atque beatae eaque. Beatae dolorem et exercitationem corrupti quod. Ad commodi porro accusamus architecto architecto illo enim mollitia illum. Voluptates laudantium labore expedita quod assumenda ab voluptas. Sunt quis eaque laudantium unde est a fugiat impedit. Impedit labore magni assumenda porro quaerat aut illo explicabo. Fuga in aperiam laboriosam doloremque. Laborum a perferendis repellat omnis quis sunt. Laboriosam ipsa iure impedit ea atque. Provident repudiandae ducimus perferendis. Autem quia provident dolore quod omnis quidem corporis sequi. Ullam assumenda quas non velit veritatis excepturi tenetur corrupti totam. Eos repudiandae ea repellendus repudiandae exercitationem debitis laboriosam. Cumque eligendi praesentium saepe assumenda molestias sunt perferendis. Ipsa iusto quae ratione ducimus voluptate doloremque eius officiis commodi. Accusamus vel nihil. Exercitationem at itaque aperiam et facere impedit dignissimos atque laboriosam. Id natus iste incidunt dolor veniam quia. Facilis modi fugiat quibusdam soluta.

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