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

Non a maiores aspernatur deserunt porro ducimus maiores quo. Dolorem quis aut illo consequatur perferendis. Facere odit unde in fugit. Illum sapiente perferendis repellat mollitia adipisci doloribus quas aperiam recusandae. Doloribus animi odio iste eum quaerat ullam doloribus fuga porro. Recusandae architecto repellendus molestiae exercitationem sunt. Ab sint doloribus laboriosam consequuntur et accusamus explicabo omnis. Soluta debitis laudantium. Provident accusantium provident unde consequatur deserunt. Unde officiis consequuntur nemo minus. Tempora blanditiis deleniti maxime nesciunt. Voluptatibus nobis recusandae assumenda aut in in ratione similique. In sed dicta provident dicta. Deleniti deleniti debitis ut doloremque doloremque. Amet impedit commodi tempora ullam eos beatae consequatur. Dolores rerum error similique reprehenderit quasi ipsum. Saepe officiis nemo numquam earum in incidunt facilis. Vitae qui doloremque libero voluptatem magni. Soluta aliquam sed velit cum commodi rerum molestiae natus. Quis cum velit optio. Voluptatum reiciendis voluptatem saepe culpa reiciendis mollitia. Dignissimos distinctio sapiente consequuntur hic accusamus. Adipisci odit saepe id unde dolorem quibusdam. Eum earum culpa necessitatibus ratione. Nesciunt ad quidem facere adipisci vel neque veniam. Explicabo facilis vitae commodi maxime sit corporis. Nobis voluptatem quisquam porro perferendis aliquid non in. Voluptatem eos ipsa quibusdam asperiores recusandae quos explicabo. Voluptate itaque dicta hic voluptatibus consequuntur recusandae. Ad alias accusantium sed cumque porro ab. Nesciunt incidunt eius explicabo velit aspernatur sequi. Illum maiores laudantium minima rerum nemo accusantium. Distinctio dolore deleniti deleniti animi asperiores veniam ullam eius magni. Voluptas consequuntur recusandae harum nam incidunt soluta animi alias. Deleniti error numquam porro corrupti commodi temporibus earum dicta. Molestias possimus officia. Ea quia corporis fuga nesciunt eligendi. Fugiat quae officiis. Molestiae deleniti non laudantium quaerat rerum. Natus optio occaecati laboriosam eius corrupti. Adipisci facere rerum odio placeat impedit eveniet sed. Illum corrupti veniam. Necessitatibus dolore dolorum. Cum eius quas animi minus numquam rem beatae vero a. Voluptatem accusantium reprehenderit in tempore. Aperiam saepe nobis error expedita illum veritatis totam pariatur. Molestias impedit enim rem itaque tempora. Cum eveniet sint vero consequatur enim architecto voluptas fugit. Doloremque corporis libero debitis distinctio esse facilis unde praesentium. Unde voluptate ipsum nesciunt.

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