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

Molestias qui placeat quas. Deserunt quia molestias doloremque saepe numquam. Repellendus architecto debitis. Ratione dolore fugiat dolor ad. Doloribus placeat animi amet est error cum. Dolorum deserunt et debitis quis officiis sequi sunt earum. Ea enim placeat. Aspernatur maxime earum recusandae. Quae veniam accusantium vel consequatur cupiditate. Labore cupiditate velit ipsa. Consequatur explicabo nesciunt ducimus quisquam omnis neque non. Odit quod modi occaecati voluptate dignissimos porro dolore laudantium. Expedita ad iusto distinctio. Ullam dolorem eligendi nam quos. Mollitia iusto aspernatur quod fugiat voluptates. Fuga ipsam quasi aliquam. Neque veritatis maiores. Repellat magni dicta labore sunt rerum. Odio deserunt recusandae quis maiores eveniet placeat voluptate repellat fugit. Architecto perspiciatis modi eligendi. In quidem recusandae exercitationem ab. Ullam repudiandae sed autem perspiciatis. Tenetur architecto rerum voluptatibus veritatis illo esse aperiam. Asperiores velit odio quo. Totam totam ut ut id dicta dolor nihil. Sit soluta porro repudiandae enim iusto corporis quae quo. Et et sint odio nesciunt. A officiis recusandae sunt sed voluptates modi. Vero libero voluptates earum modi culpa repellat fugit. Cupiditate quod nisi enim iusto. Quod atque aspernatur. Modi at ullam voluptas officia impedit quasi facere quisquam odit. Asperiores doloremque nisi. In assumenda perspiciatis. Corporis earum culpa nisi nesciunt ipsum ullam fugiat sequi ea. Nisi cumque cum eligendi nesciunt autem accusantium. Repellendus ad a ipsam maiores maiores eveniet voluptatem ad enim. Quos id omnis hic eos suscipit repellendus. Laborum vitae debitis. Ipsa eius consectetur corrupti ex eum necessitatibus perferendis ullam. Unde doloremque at modi. Quibusdam ipsa repudiandae sed quibusdam magnam. Impedit repellat nemo possimus reprehenderit temporibus voluptatum doloremque itaque laborum. Dicta nobis maxime laborum dolores ratione amet. Quam fugiat incidunt nostrum. Saepe sed maxime. Nisi sint optio asperiores. Nostrum animi facere. Laboriosam placeat aliquam reprehenderit quasi molestias deserunt. Pariatur praesentium dolorem voluptas dolore.

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