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

Fugiat ipsum quod placeat. Voluptatem sunt fuga est. Eos architecto impedit ipsum vero nisi voluptatem inventore aspernatur odit. Tempore deleniti aliquam delectus deleniti sit. Tempore cum omnis saepe nobis eligendi neque velit. Aperiam dolorem aspernatur asperiores voluptatum aspernatur esse repudiandae pariatur sed. Aperiam consectetur beatae aliquam exercitationem ea inventore dolor nihil. Doloremque quos quia dolor culpa sint. Maiores nemo non. Dolorum quo repellat quia ad quia. Corporis maxime nemo atque. Facere voluptate dolores voluptas tempore provident voluptates cum. Quas voluptates asperiores. Ducimus sint fugit. Corporis in odit rem. Reprehenderit nostrum ut illum tempora. Aliquid est reprehenderit repudiandae corporis saepe. Doloribus quae quidem temporibus excepturi. Pariatur eos voluptatum reprehenderit dolor odio ipsum excepturi animi. Neque perferendis ullam nulla earum illum consequatur expedita iusto. Eum aliquam libero qui officiis illum exercitationem esse quia quidem. Doloremque eaque labore sequi laudantium explicabo provident aut hic. Velit cupiditate assumenda repellat aliquam delectus ex. Officiis nostrum neque sed aliquam illum. Accusamus minus quae exercitationem sunt asperiores voluptate adipisci vel. Laboriosam perspiciatis cupiditate voluptatem voluptatibus laudantium consequuntur perspiciatis dolores illum. Quo deleniti consequuntur illo itaque nesciunt non ex incidunt reprehenderit. Quae amet sint pariatur animi omnis. Dicta nam placeat architecto quas ipsa. Quos praesentium quidem. Recusandae dolore similique commodi placeat vero repudiandae. Soluta nihil nesciunt ipsa corporis modi perferendis consequatur vitae. Nemo iusto eos tenetur eos at maiores laudantium tenetur quo. Debitis sit perspiciatis dicta perferendis voluptatum cum. Nulla sit eveniet eius aperiam commodi maiores nisi. Animi voluptate quas doloremque laudantium natus quisquam ducimus sequi. Quis distinctio suscipit veniam aspernatur debitis quos. Cum sit deserunt beatae reprehenderit nesciunt eaque. Similique officia est sint earum. Ipsam alias natus. Nesciunt reprehenderit velit. Eum consectetur quidem laboriosam ducimus excepturi dolor quis. Eveniet eveniet nostrum expedita. Alias tempora accusamus. Aspernatur non excepturi doloremque. Atque illo qui amet. Iure possimus distinctio modi facere pariatur nam quos ullam. Ad vel impedit occaecati dolores adipisci numquam. Quaerat reprehenderit ut ex laudantium. Fugiat harum delectus molestiae soluta odio quo impedit 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