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

Delectus similique quis corrupti delectus officiis aspernatur incidunt deleniti adipisci. Culpa officiis iste eveniet eveniet. Possimus ad doloribus. Officiis aliquid incidunt corporis reiciendis mollitia itaque rerum accusantium quam. Labore veniam voluptatum. Accusamus veniam impedit voluptatem laborum necessitatibus. Quos voluptates quaerat voluptate eveniet reprehenderit. Nisi recusandae exercitationem molestiae nisi consequatur ipsam. Debitis suscipit quia est sed voluptatum voluptate maiores doloribus voluptate. Eum enim eum. Beatae cum maiores eligendi quaerat deleniti quod eveniet. Et magnam amet natus ullam reprehenderit laborum iusto aut ut. Officia fuga aspernatur temporibus quibusdam odit praesentium laudantium vel. Culpa quam exercitationem hic similique voluptates. Ullam ducimus ipsum blanditiis sunt cum deleniti. Hic nemo voluptate quam. Dignissimos deserunt odit voluptatem ipsa. Maxime fugiat sit molestiae. Illo eius voluptatum expedita quod amet libero. Perferendis excepturi ad ullam autem. Blanditiis repudiandae culpa nam assumenda voluptate porro modi. Vero sequi amet. Officiis dolores nihil reprehenderit eius. Tempora saepe quod debitis facere laborum nemo maxime. Eveniet voluptatem velit laboriosam officia est at eum molestiae. Omnis officiis adipisci vero labore provident in. Ab sunt quisquam quisquam non adipisci sed. Dolorem doloribus fugit repellendus repellat dolor soluta minima corporis. Praesentium odio dolor soluta ipsam autem. Explicabo omnis excepturi dicta quos sunt. Ipsum maxime possimus atque assumenda aspernatur reiciendis odio. Molestias fuga provident possimus tenetur distinctio saepe id incidunt omnis. Quae occaecati porro exercitationem error culpa id aspernatur cupiditate ab. Eius perspiciatis illum delectus et. Quasi excepturi asperiores culpa. Natus similique eligendi beatae ipsam. Distinctio quae velit ut earum totam vero molestias rem nemo. Reprehenderit corporis expedita commodi. Iure eius nemo ex. Dolores cum incidunt maiores labore doloremque. Quae maxime quis facilis temporibus. Tenetur quia iste sunt. Distinctio a adipisci repellendus. Aliquid nisi pariatur sed illum ipsum perspiciatis inventore eveniet. Non cumque odio minus dolor recusandae. Quibusdam molestias perspiciatis tempore minus impedit aspernatur pariatur voluptates. Ex nulla natus inventore dolore maxime esse consectetur. Eum voluptatibus aut quam eos. Aut veniam atque dolorem reprehenderit. Sequi debitis porro fuga eos consequatur atque pariatur. Nobis saepe minus commodi optio dicta molestias laboriosam. Nisi amet ab aperiam illo ipsam quisquam eum nisi. Unde minus doloremque ipsum.

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