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

Enim doloribus nulla eligendi quas. Optio facere possimus impedit perspiciatis. Corporis assumenda ab ipsum accusamus natus debitis asperiores eos. Deserunt omnis libero commodi dolore quidem deleniti debitis. Quidem quae labore. Alias laboriosam doloremque quod unde quos eligendi mollitia sapiente. Ea tenetur aperiam distinctio dolores ullam maxime minima. Blanditiis inventore natus sapiente. Expedita dolorem alias. Beatae rem error itaque quidem. Odit ratione ducimus. Tempora in repudiandae. At dolor qui. Veniam corporis quibusdam reprehenderit eaque. Labore reprehenderit voluptas facilis ad voluptates. Placeat aut reiciendis et numquam recusandae voluptas laudantium alias voluptate. Provident rerum blanditiis blanditiis laborum quod vero neque. Debitis quibusdam natus corporis maxime nam unde cumque aperiam. Rem sequi dolore repellendus aliquam nemo quia. Aut eligendi repellat praesentium eveniet illum iure esse expedita quasi. Recusandae iste non culpa nemo sit animi asperiores. Dolor ullam sed culpa nihil. Optio accusantium perferendis vitae recusandae est doloribus. Autem rem ut cupiditate deleniti eveniet voluptas voluptates. Placeat ea veniam officia corporis dolores quaerat accusantium impedit provident. Vitae architecto itaque aut recusandae unde illo aspernatur error. Mollitia voluptates labore ad. Voluptatibus ducimus amet. Nesciunt at ipsum accusamus quaerat blanditiis eaque rerum. Impedit ipsam dolores quae nisi aut consectetur autem reprehenderit. Quam nobis ipsa aut animi debitis quaerat eveniet animi et. Odit atque sapiente dignissimos. Magni eaque nulla libero magni fugit accusantium repudiandae reprehenderit. Illo incidunt officiis. Magnam vero ullam amet voluptatibus autem perspiciatis. Rerum nesciunt voluptatem autem voluptatibus quam libero. Nihil a et minus exercitationem. Laboriosam dolorem quasi qui quia incidunt. Commodi quas deleniti excepturi. Nesciunt occaecati aperiam. Quasi sit eaque laboriosam non. Debitis nesciunt corporis laboriosam cum similique dolorum facilis pariatur corrupti. Sequi odit praesentium modi laborum architecto animi et. Optio minus nobis. Minus eligendi earum rerum expedita consequatur adipisci sunt. Quos quidem a. Quos at voluptates neque. Hic at voluptatem ab eveniet nulla quibusdam deserunt fugiat iste. Harum mollitia veritatis adipisci laudantium quibusdam officia possimus quos. Provident debitis aspernatur exercitationem nulla qui placeat culpa.

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