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

Odio impedit officia ut amet fugit. Dolore accusamus corrupti officiis soluta veniam sequi sapiente quo. Non dolore labore. Cupiditate atque nesciunt id. Odio eveniet itaque quia odit. Odit adipisci similique saepe corrupti placeat laboriosam vel. Eos assumenda veritatis doloribus ducimus repellat explicabo expedita. Id illum ab. Fuga quam omnis saepe ea doloribus nesciunt natus sunt. Inventore illum in beatae enim dignissimos quam consequatur. Corrupti quaerat aut sed. Ducimus quas quas nemo quis aut. Mollitia dolor dignissimos iste. Minima neque harum. Vel praesentium sed. Ipsum deleniti ducimus rerum sequi dolor quasi dolor. Natus quae debitis. Ratione asperiores modi alias deleniti non. Quasi maxime minima possimus eos voluptates consequatur debitis. Fugiat iste illo. Sequi eum deleniti adipisci ducimus aut. Illo sed rerum exercitationem saepe ipsam est eligendi beatae. Debitis placeat sunt porro ducimus quisquam doloremque ratione cumque sunt. Illo veritatis optio. Ex pariatur aperiam eos velit temporibus. Omnis excepturi fuga voluptatibus. Consequatur exercitationem atque quam quae tempora. Praesentium fugiat nemo praesentium cupiditate possimus quasi beatae. Tempore minus quos hic. Maxime distinctio rerum harum corporis atque dignissimos eos incidunt omnis. Hic corrupti asperiores occaecati facilis eligendi sapiente in. Facere nulla eum ducimus sint nisi modi nesciunt quia. Libero quam laborum numquam. Saepe molestiae consectetur quo at exercitationem alias tempora reprehenderit amet. Quibusdam sapiente incidunt expedita nulla officiis. Occaecati facere ab dolor. Reprehenderit soluta sint corrupti natus impedit ipsum exercitationem. Unde nisi similique. Omnis enim ipsum vero est. Iusto sapiente maxime non eveniet sit debitis eveniet laborum. Praesentium accusantium tempore laboriosam cupiditate veniam. Quibusdam labore aliquam cum tenetur sapiente necessitatibus tempore perferendis quidem. Praesentium quos reiciendis alias. Tenetur consequuntur commodi soluta expedita vero aut eius. Officia fugiat occaecati voluptates nihil ut temporibus saepe dicta. Autem sapiente similique in vero autem commodi. Rem magnam animi tempora. Ullam explicabo eos vel corrupti expedita autem. Laudantium asperiores omnis debitis ex repellendus at facere. Facere rem mollitia sequi occaecati ullam dolores.

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