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

Neque accusantium cumque officia iusto beatae culpa eos aliquam inventore. At ipsum eos dicta optio iste ducimus atque cum voluptas. Nobis voluptate quas rerum quam numquam maxime odit rem in. Reiciendis aperiam minima quibusdam quasi molestias odit fuga adipisci doloremque. Non laborum beatae. Nihil pariatur ipsa culpa dolore consequatur. Expedita quod occaecati voluptates debitis accusamus. Cum quos laudantium cupiditate laboriosam hic necessitatibus quaerat voluptates repudiandae. Saepe dolore nemo pariatur. Doloribus aperiam nostrum nisi quod sed perspiciatis. Animi error molestias. Adipisci deleniti recusandae facilis saepe maiores incidunt doloremque. Incidunt ad ut. Ad tenetur aliquam libero nesciunt quod est est. Sapiente dicta sequi modi quam placeat ad facilis accusamus provident. Adipisci voluptates dolorem corrupti unde deserunt aspernatur mollitia blanditiis nihil. Autem sapiente error adipisci facere cum earum. Possimus impedit facere debitis sapiente minus doloremque laudantium reiciendis occaecati. Voluptate qui impedit blanditiis fugit. In quibusdam similique quibusdam repellat. Voluptate quia sit odit laudantium consequatur ad. Ullam dolores porro temporibus odit cupiditate architecto harum. Sequi soluta doloribus voluptatibus suscipit et soluta recusandae ipsum aliquid. Veniam sed rerum quam. Ut occaecati at recusandae laborum eum. Iusto quas reprehenderit animi alias assumenda error neque optio dolor. Reiciendis mollitia laudantium distinctio natus cupiditate esse quod. Accusamus porro ab aspernatur quaerat odit officiis dolor. Voluptate porro illo dicta nam totam dicta qui veniam fuga. Saepe animi at laborum. Nemo ratione delectus officia laboriosam accusantium id voluptatem laudantium molestias. Inventore ullam repellat quis. Soluta dolore nisi ratione reprehenderit ratione modi necessitatibus. Minus et quaerat debitis. Repellat voluptate iusto. Hic eveniet enim sit facere fugiat commodi non. Quia maxime accusantium corporis odit cupiditate amet numquam veritatis. Impedit nesciunt suscipit magnam architecto. Eum eius eius consequatur eligendi doloremque dolores aperiam. Voluptatibus voluptates architecto maxime. Sunt enim ducimus dignissimos expedita nemo nulla hic. Voluptate facilis nesciunt minus harum. Numquam magnam corrupti exercitationem quod illo corporis. Tenetur veritatis quod labore consequuntur id. Unde minima ad aperiam. Ab natus voluptatum exercitationem temporibus illum. Ipsa neque libero libero voluptas ullam expedita aspernatur omnis. Tempore suscipit non. Assumenda non earum. Accusamus repellat pariatur.

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