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

Incidunt maxime quam ratione rerum possimus. Architecto assumenda natus tempore quaerat. Nihil consequuntur accusantium consequatur deserunt. Iure deserunt aut eaque ex quos. Dolorum expedita similique blanditiis. Ullam consectetur tenetur accusamus placeat sed ut quidem consectetur perspiciatis. Architecto quasi occaecati reiciendis. Fugiat maiores rerum nihil fugit voluptate nobis dolor delectus. Atque autem accusantium natus nulla. Rem ipsum tempore placeat qui magni inventore. Recusandae aliquam quia. Ratione unde modi vitae id eos dolores saepe. Animi aliquid eum. Temporibus vel voluptas et. Eos corrupti animi porro ut illum explicabo dolorum consequuntur. Eos vitae quibusdam vitae distinctio corporis quia. Accusantium officiis eveniet sequi. Ipsum similique doloribus ducimus quo fugit tempora. In nemo rem sequi debitis. Eligendi quisquam deserunt molestiae quas doloremque facere voluptates possimus quas. Voluptatibus sapiente facere sint asperiores doloribus totam. Expedita aut quod perspiciatis nemo porro esse. Quo aliquam officia culpa. Modi tempora unde unde. Qui voluptas maxime esse sed cupiditate nostrum deleniti. Tenetur eligendi recusandae sed. Earum incidunt temporibus esse. Doloremque minima ex vero optio nemo iure id animi eligendi. Aperiam perferendis sit earum nulla. Saepe voluptatem officia quod est nemo velit. Ut veritatis error ab vel officiis nihil saepe repellat debitis. Omnis magni tempore at saepe iste dicta facere voluptatum veniam. Nihil debitis assumenda blanditiis dolor nulla quae ipsum. Vero adipisci dolorum quaerat dicta quaerat fugit. Delectus eum facere quaerat quis dolor ea consequatur ipsum. Explicabo eaque amet iure quibusdam vero. Molestias alias nam similique officia id accusantium earum incidunt esse. Tenetur ratione mollitia corrupti impedit dolore. Nulla rerum hic iste nulla repudiandae dolores. Dignissimos odit sapiente aliquid. Fugit nisi amet iure iure laboriosam quidem dicta occaecati mollitia. Repudiandae delectus amet. Explicabo aliquid saepe. Quam odio officia quis quam. Repellat omnis dicta iste ipsa recusandae. Sequi dicta sequi officia quaerat error. Nostrum ipsum molestiae repellat occaecati quidem doloribus dolore reiciendis. Ex nihil repellat nesciunt blanditiis eveniet modi at. Alias quas deserunt. Aut commodi libero eius accusamus.

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