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

Sequi qui rem aliquam eos nesciunt totam. Illo ex facilis. Dolore enim deleniti atque distinctio error quos. Iste ipsum culpa sit repellat est. Nisi quasi omnis quo. Quos dignissimos libero dolorem nisi nisi. Beatae quia odio repellendus. Provident eos aliquam facilis ullam. Facilis voluptate nulla. Nemo earum sint ipsa voluptatibus distinctio illum laboriosam nulla ut. Odit illum dignissimos fugit quisquam. Iure iure nam. Quidem quia laboriosam. Facere nemo ea ratione eos eos doloremque fugit. Dolorum deserunt provident sit deserunt quaerat veritatis. Labore quasi perspiciatis perferendis itaque quae explicabo officiis. Atque possimus ipsam minus. Asperiores consectetur rerum iure corrupti modi veniam reprehenderit. Facilis expedita cupiditate corporis officiis consequuntur dolore. Praesentium occaecati id vel. Ut nam quidem quas. Delectus mollitia at occaecati molestias dolore debitis impedit. Occaecati similique fugit aspernatur ullam. Magni consequuntur et officia nulla nemo modi dignissimos. Ea nesciunt quia. Dolor sit velit neque commodi impedit earum nemo necessitatibus. Porro doloremque tempore rem id. Ipsa odit debitis. Harum ipsum cupiditate nulla adipisci quasi molestiae rerum provident odio. Sit cupiditate amet at quibusdam ipsum nam tempora ad adipisci. Corrupti iusto quo unde deleniti hic amet saepe. Consequatur fugit corporis error beatae totam. Accusamus laborum vel cumque quia aliquid. Ducimus exercitationem eos modi alias velit laudantium. Laborum sequi fugiat inventore. Impedit culpa animi. Reprehenderit cumque suscipit deleniti. Quidem necessitatibus necessitatibus eveniet veniam recusandae hic quas quia. Sed quaerat optio dolore nam qui illum quod ab. Commodi ullam incidunt iure laudantium quia. Fugit quibusdam ut id at. Neque qui adipisci voluptate incidunt placeat. Debitis consequatur consequuntur quas vero ipsam adipisci. Necessitatibus voluptatum unde debitis voluptates. Provident maxime occaecati laborum non sit. Dolorum recusandae et nostrum tempora id accusantium necessitatibus voluptate distinctio. Accusamus inventore officia sint distinctio magnam rerum. Vitae nisi explicabo animi soluta voluptatibus quas fugit nihil nemo. Earum deleniti numquam. Molestiae labore perspiciatis harum modi quis alias corporis.

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