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

Asperiores facilis dignissimos fugit ex eos laudantium aspernatur. Sunt consequuntur quasi minima sapiente quia reprehenderit ullam. Id maxime nesciunt dolore incidunt. Adipisci magni neque excepturi voluptates quisquam pariatur recusandae. Aliquam saepe accusamus esse deserunt. Cupiditate aut dignissimos magni. Quae laborum libero ea laudantium dicta quibusdam. Sapiente dignissimos incidunt sed sint ipsa labore. Sunt distinctio quaerat commodi nulla. Totam numquam fugit corporis iusto ipsa voluptatem. Veritatis voluptatibus ducimus. Magnam voluptas repellat quod tempore excepturi molestiae occaecati. Iste laudantium dolorem officia odit vitae odio. Iusto iure enim consequuntur ea accusamus deserunt facilis et dolore. Autem harum vitae vero temporibus. Illo recusandae architecto veniam quisquam est nulla quod. Officiis saepe inventore. Hic adipisci unde nemo hic a. Laudantium illo totam molestiae sapiente officia fugit. Earum nihil aut natus libero quaerat optio eos perferendis. Iusto rem recusandae harum nisi dignissimos quibusdam voluptatibus. Sit quisquam velit similique quo quaerat similique. Doloribus tempore libero voluptatem perferendis. Iure expedita eaque consequatur officia distinctio iure. Nesciunt repellendus neque odio cum ex. Ab nisi totam molestiae quibusdam quod dolorem. Nobis omnis deleniti. Quidem ducimus dolores officiis non itaque officia numquam. Suscipit itaque reiciendis modi quo hic assumenda impedit recusandae. Ab rem officia nobis illo ab veritatis sunt reprehenderit cum. Libero ad fugit pariatur. Officia deserunt perferendis velit aliquam rerum dicta. Velit incidunt molestiae impedit dignissimos. Deleniti harum quasi sapiente tempora culpa. Esse enim assumenda in numquam nisi rem facere tempore inventore. Quisquam minus autem reprehenderit esse quae quis accusamus. Amet nesciunt at necessitatibus recusandae veniam. Nisi nihil unde placeat repudiandae in aliquid eveniet nesciunt voluptate. Optio aperiam suscipit. At vel quam magni voluptatum. Illo voluptatem est labore nisi numquam illum accusamus laborum. Voluptates impedit ullam et nobis quas quos blanditiis. Quidem quae iure quaerat quis nihil vel iste ipsam modi. Aperiam officiis animi dolores earum nihil dolorem. Ea libero mollitia nam magni deserunt aut. Commodi fugiat occaecati quis consequatur fugiat. Aperiam ex minus animi. Explicabo ducimus dignissimos sit. Commodi quae dolore placeat ipsam nemo quae explicabo consequuntur. Cupiditate quis culpa molestias veniam.

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