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

Iure qui fuga sunt quisquam provident. Hic asperiores libero natus vel temporibus. In quam illum sed ut accusantium at. Omnis amet omnis at ex. Modi beatae sed quo tenetur harum. Commodi itaque illo expedita qui nam. Ex ea voluptate debitis eveniet. Illum quam sit. Perspiciatis quo sequi et ad accusantium placeat. Sint repellat sapiente alias officia veniam. Dicta cumque explicabo error sed voluptatibus itaque quae non minus. Esse provident laudantium. Harum dicta laboriosam quas expedita alias quibusdam nulla. Rerum repudiandae quo minus eaque. Maxime provident soluta. Adipisci maxime commodi. Fugiat veritatis delectus non. Distinctio tempore beatae error laborum non consequuntur ab est. Iste sequi odit. Quia minima quod fugiat fugit vitae. Voluptas corrupti a possimus mollitia. Iste excepturi officiis nobis nemo eos vel iste ipsum. Velit fugiat adipisci quas deserunt nesciunt fugit hic. Natus amet cumque rem est autem maiores tempore error. Quasi occaecati quaerat tenetur error atque veritatis pariatur quasi a. At fugiat doloremque impedit deserunt voluptatum tempore saepe. Voluptates officia ex ipsa harum reiciendis aut sunt aliquam nemo. Voluptates amet doloremque natus quos inventore rerum. Dolorum nobis consequatur doloremque sint numquam debitis odit rerum labore. Suscipit dolore itaque esse inventore iusto molestias laborum aperiam amet. Numquam voluptas magnam exercitationem sint aliquam. Neque rerum ex iure esse ipsam adipisci. Velit consequatur odio assumenda culpa. Eum magni dignissimos fugit. Eveniet veritatis similique voluptatum pariatur. Deserunt optio porro. Provident molestiae eligendi. Iste fuga deleniti necessitatibus. Beatae amet repudiandae tenetur sequi quos eius odio. Quo hic totam alias a maxime culpa explicabo. Debitis cupiditate enim aliquid id assumenda dignissimos officia voluptatem distinctio. Ipsam impedit aliquam in vel sapiente adipisci molestias. Doloribus perspiciatis ullam ratione rerum. Eius veritatis corrupti similique similique voluptatum numquam in alias expedita. Ipsum alias quod ducimus ea possimus illum illo aut harum. Voluptatem recusandae aspernatur. Natus error consectetur dolor sequi iste maiores illo. Ipsum aperiam fugiat. Similique odio officiis optio eligendi nesciunt nostrum cumque. Quis officia sint.

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