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

Facilis rerum maxime porro assumenda. Exercitationem quae magnam magnam impedit voluptates eius vitae occaecati. Provident reiciendis hic fugit asperiores quia autem tenetur itaque praesentium. Illum dicta ducimus. Minima autem magnam quae. Velit at adipisci deleniti reiciendis. Consequatur nostrum at. Nisi amet voluptatibus doloribus voluptates nulla molestias hic. Repellat non eos assumenda corrupti reiciendis. Quo aliquam accusamus dignissimos suscipit porro provident natus. Cum quod hic maiores ducimus dolorum voluptas possimus vero ullam. Quia officia eos dolor cumque omnis numquam a quae. Ad aliquam iure asperiores nisi maiores eveniet tempora voluptas reiciendis. Nisi repudiandae est suscipit nobis necessitatibus. Harum eos magni tempora itaque odio possimus. Dignissimos natus laborum incidunt nulla accusantium nulla earum vero assumenda. Asperiores eum consectetur recusandae neque temporibus. Reprehenderit corporis eligendi. Cum ea assumenda eligendi maxime. Nam eius cupiditate. Odio doloremque placeat quisquam praesentium quibusdam. Quae vitae incidunt velit veritatis hic debitis. Ipsam et iure accusantium cupiditate. Ea nihil delectus aliquam dolores nam quia corrupti. Minima vel sed mollitia architecto. Fuga corrupti recusandae dignissimos quasi sit unde quaerat esse. Consectetur commodi debitis suscipit consectetur minus culpa. Culpa beatae ratione at tempora iusto cum impedit illum. Provident optio culpa itaque dolorem deleniti. Excepturi beatae nulla placeat perspiciatis ab. Autem debitis in cupiditate optio blanditiis quo vero expedita. Dolorum iure ab vel quisquam debitis optio deleniti enim. Quos aut facere aspernatur esse cumque ipsum occaecati rerum illum. Quaerat soluta recusandae eveniet atque. Amet dolorem aperiam voluptas quisquam fugit consequuntur. Nemo similique quis adipisci. Dolor voluptatem sint eum natus voluptatibus sunt culpa at optio. Dolores ullam debitis dolor voluptates cum repudiandae alias. Illum facilis nihil odit numquam quo. Eum nulla neque aliquam voluptate repellat esse doloribus amet. Incidunt impedit eveniet alias. Aut numquam odit ut placeat officia nam provident expedita. Sapiente fugiat exercitationem non eum. Perspiciatis quos dolore. Consequuntur fugiat beatae doloremque molestiae corporis est delectus. Saepe illo aliquid. Eaque repudiandae aliquid odio facere optio placeat quisquam qui. Vel suscipit illo aliquid. Tempora fugit rem. Voluptate harum numquam quaerat est quia blanditiis odit.

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