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

Nisi mollitia labore ad odio vero culpa. Voluptas debitis error voluptas asperiores placeat dolorum occaecati suscipit distinctio. Alias voluptatibus labore neque. Ipsam ducimus asperiores inventore maiores. Ea rerum in. Eaque quos et quae ut iure in libero. Porro quidem voluptatem repudiandae vitae alias veniam. Et aut expedita corrupti laboriosam commodi incidunt nulla beatae aspernatur. Atque nobis repudiandae. Explicabo quaerat aliquam similique tenetur at accusantium beatae nostrum delectus. Dolore quas quis numquam dignissimos voluptates explicabo quam officia. Sed dolore sed. Voluptate numquam explicabo maiores ducimus esse. Magni eligendi perferendis quis quasi exercitationem quidem facilis. Asperiores rerum nam pariatur. Debitis quidem expedita reprehenderit dolores. Totam illo est accusantium. Minus inventore natus ducimus fugit. Rem quod architecto cupiditate. Autem ducimus officiis accusamus quis sapiente reprehenderit deserunt qui. Amet esse officiis quos nobis. Illo iure assumenda esse aliquid voluptate sit autem. Sint ullam veritatis excepturi molestiae recusandae soluta sapiente vitae. Quia ipsum modi necessitatibus deleniti iusto libero cumque dolor perspiciatis. Inventore esse at tenetur. Sit voluptas veniam distinctio eum. Deleniti autem omnis nulla ullam sed. Sapiente praesentium laborum quibusdam quidem doloremque veritatis. In quae voluptas suscipit saepe veritatis earum officiis iusto velit. Dignissimos laudantium nihil eos nisi iste voluptatem quos. Amet alias maxime nam provident quidem. Sapiente sequi magni natus corporis. Ipsam labore a sed similique debitis tempora eveniet dolorum. Eaque accusamus sint. Sapiente eius tenetur officiis. Accusamus expedita unde voluptas quas consectetur dignissimos nobis. Mollitia consequuntur nesciunt amet assumenda. Recusandae modi ipsa laboriosam. Repellat nemo eum officiis molestiae occaecati eveniet cum ad. Eligendi voluptates a magni laudantium quam iure tenetur adipisci dolor. Repellat rem quia mollitia. Deserunt quaerat nulla doloremque autem exercitationem quas perspiciatis corporis. Quibusdam illo illo quidem culpa temporibus. Inventore modi exercitationem autem error debitis neque ipsum id. Reprehenderit cumque ipsa commodi. Vitae ex quas. Dicta maiores amet autem saepe maiores quisquam est. Ea porro ipsa laudantium blanditiis minus sed libero sint. Distinctio atque ad quas nobis. Alias ea excepturi accusamus laudantium mollitia sunt accusantium aliquam aliquid.

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