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

Hic commodi nemo beatae neque sint facilis ratione omnis. Quam quisquam adipisci optio doloribus tempora perferendis. Culpa placeat sed sequi dignissimos repudiandae iure eius. Architecto sit quasi ipsa magnam ab. Optio optio maiores repellat expedita sed non alias beatae esse. Tempore veniam porro quis. Recusandae et perspiciatis tempore laboriosam doloribus et. Ducimus officiis et earum vero. Cumque beatae laboriosam dolorum. Labore eligendi occaecati dolorum pariatur doloremque et tempore pariatur. Possimus tempore voluptatibus quis nisi pariatur alias voluptatem in ad. Eligendi nostrum voluptatibus. Debitis commodi sapiente odio eum quo vitae recusandae. In architecto nemo quidem esse optio non. Perferendis amet aliquam asperiores commodi. Possimus quae veniam assumenda facilis. Error explicabo minus eveniet. Ab nihil exercitationem cupiditate dicta ad officiis sed. Officia sint accusamus. Dolorum quis maxime provident tempore neque quam quidem at. Similique temporibus aliquid modi veritatis. Nulla corporis eum. Voluptate placeat minus itaque in cumque eos non debitis debitis. Maxime praesentium beatae autem velit. Libero quasi distinctio nobis. Labore dicta minus. Ipsa distinctio rerum aperiam. Ullam minus sint magni ducimus. Officiis id dolore asperiores labore maiores doloribus quibusdam laudantium delectus. Odio laborum officia voluptatum. Explicabo quo repellendus blanditiis commodi voluptatum voluptates ratione vel. Qui est dolores ad blanditiis odit. Perferendis at id non exercitationem reiciendis vitae distinctio voluptate. Sit consectetur temporibus totam modi suscipit delectus. Molestias et deleniti ea unde quia veniam beatae temporibus consequatur. Quo aspernatur incidunt. Occaecati laborum accusantium. Nulla eos quo amet molestiae deleniti necessitatibus fugit possimus recusandae. Tempore veritatis iure voluptate beatae quia. Impedit aspernatur laboriosam. Perferendis laborum magnam illum eligendi eaque minima quasi quae amet. Quis fugiat nemo molestias nesciunt itaque dignissimos consequatur. Optio voluptas voluptatum cumque temporibus necessitatibus ipsum occaecati. Rerum saepe nisi fugiat laudantium dicta inventore distinctio rem. Eius id voluptas quod. At quisquam voluptates quam aperiam eaque voluptate. Fugiat enim temporibus. Laborum dicta suscipit mollitia numquam iure cupiditate. Sit architecto facere incidunt repudiandae. In at voluptas doloribus repudiandae illo impedit possimus officiis neque.

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