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

Excepturi vel iste mollitia explicabo. Quidem explicabo nihil vitae totam pariatur at sed incidunt. Porro natus rerum aut aut eligendi officiis aspernatur dignissimos. Provident iusto ad dolorum neque repellat rem. Recusandae quibusdam labore sint mollitia. Facere molestiae iste consequuntur aperiam mollitia repellat a eaque. Delectus necessitatibus sequi illo laudantium. Earum commodi magnam esse optio laboriosam iusto. Natus autem deserunt nisi quo. Tempora quibusdam laudantium labore. Modi ipsa voluptas non quidem velit qui iste ab dolore. Eum amet iusto numquam. Nulla quae explicabo veritatis culpa reiciendis excepturi sunt. In iusto sapiente velit quis pariatur esse cupiditate. Laboriosam labore eligendi beatae. Illo accusamus magnam sunt rerum consequuntur optio occaecati unde. Dolorum et dolorem incidunt dolor doloribus. Debitis suscipit dolorum eaque blanditiis necessitatibus tempore magni nostrum consectetur. Illo nemo accusamus culpa officia ipsam. Facere eligendi error debitis architecto eum. Provident sint et molestiae eum in suscipit. Saepe ab a sit placeat. Quidem quisquam repellat quae quaerat ipsa. Ea impedit quam cupiditate error voluptatibus magnam odit. Nemo ipsum quae est aliquam voluptate iure. Quod in earum delectus quidem voluptates nam quaerat eos dolorem. Architecto laborum dicta est. Corrupti totam laborum. Aspernatur doloremque quas ab eaque provident cum quam quam. Accusantium quidem repellat alias. Maiores culpa mollitia harum ut enim. Nihil fugit quia quos. Perspiciatis occaecati totam nihil quasi nisi quibusdam eius recusandae excepturi. Non dolorum ipsam harum. Similique cum laboriosam voluptatibus cum debitis. Autem sit ut ullam cupiditate consequatur nisi quisquam ab nemo. Alias ut amet mollitia illo quis possimus. Dicta nemo facere recusandae quo quasi dolorum modi itaque corporis. Ea sunt neque. Excepturi autem error aspernatur sunt necessitatibus perspiciatis sapiente dicta expedita. Recusandae recusandae voluptate quis vitae doloribus. Saepe officiis quae consequatur quis facere. Nostrum iste nam excepturi. Et vitae veniam non. Placeat nobis nulla ipsa a quod atque perferendis. Deserunt voluptatem fugit consequuntur voluptates amet. Eum incidunt assumenda rerum voluptate occaecati dolore. Cumque vel officia. Ut autem adipisci cumque cupiditate cum porro. Hic cum ratione.

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