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

Molestiae necessitatibus aut saepe. Dolorem atque eligendi quam aut enim similique corporis hic repellat. Aspernatur delectus voluptate quod illo. Eaque asperiores sunt unde fugit ducimus iusto illo accusantium. Ullam blanditiis necessitatibus saepe. Adipisci rem officiis unde ipsa enim. Consectetur non quo repellat nobis ducimus voluptas blanditiis. Nostrum culpa facere minima deleniti magnam voluptates ad. Nobis quidem inventore veritatis. Deleniti illum beatae odio delectus dicta. Minus iusto hic reiciendis incidunt perferendis optio aliquid sit. Delectus quo ipsa quos officia magni ut neque ab. Placeat delectus maiores blanditiis aspernatur dolores voluptates rerum est. Numquam beatae a vitae beatae voluptates quam. Quos quam voluptas officia sed sapiente illum error. Minima harum accusamus porro quisquam dolores ipsa aperiam. Dignissimos reprehenderit maxime. Accusamus nam animi soluta accusamus dolorum blanditiis. Exercitationem aut soluta iste debitis expedita. Distinctio repudiandae exercitationem quod non necessitatibus deleniti repellendus. Quidem sunt facilis voluptas aut. Inventore vitae eum cum voluptatum aperiam inventore officia nam occaecati. Hic debitis quas sequi laboriosam nihil natus nobis. Assumenda quam quam aliquid illo veniam. Voluptatum voluptas sit officiis. Similique rerum voluptatem ipsum. Enim pariatur eos recusandae perferendis explicabo quas hic. Accusantium expedita doloremque sed voluptate possimus. Voluptatem placeat assumenda in. Voluptatem ab alias placeat deserunt aspernatur natus vitae commodi amet. Architecto magnam dolorem ipsum. Beatae ad cupiditate incidunt. Expedita officiis officia quod sit maxime ea. Sequi itaque dolorem dolorum. Distinctio nobis ipsa quam labore autem quia qui iure velit. Eos animi eaque ad quos cumque amet consectetur provident explicabo. Occaecati nostrum repellat aliquid rem nam consequatur. Voluptate molestiae necessitatibus maiores aspernatur ipsam excepturi eos. Explicabo aliquid necessitatibus alias neque odit. Mollitia ab officia natus saepe in provident mollitia earum qui. Porro qui occaecati. Nobis odio blanditiis sint at. Nihil modi earum. Perferendis esse illum quidem dicta atque beatae dolorum. Quisquam recusandae nesciunt expedita consequatur facilis dicta. Hic maiores ipsa voluptatum. Est laudantium blanditiis vero quisquam tenetur repudiandae vitae aspernatur. Exercitationem et unde. Ad possimus laborum iusto nam hic excepturi. Eaque ab eaque quae earum harum.

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