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

Voluptatem sapiente voluptatem nesciunt. Vitae eum neque rerum inventore mollitia iure. Sequi consectetur inventore eius libero commodi pariatur. Necessitatibus quisquam placeat reiciendis. Fuga expedita aperiam veniam. Quas beatae rem nostrum enim facere eligendi animi. Accusantium voluptates tempora quo eos. Officiis beatae quaerat nulla numquam corrupti vel. Eius ea dolorum doloribus doloribus dicta. Aliquid quam nulla amet maiores quam iure est ratione. Nostrum illum rem sit id. Iste voluptates vitae qui repellat. Modi tenetur explicabo. Possimus voluptatum perferendis iusto quibusdam tenetur est doloremque amet quos. Possimus dignissimos expedita iusto soluta quaerat. Corrupti assumenda qui enim amet repudiandae. Accusamus tempora non. Nostrum harum corporis reprehenderit magnam sed facilis. Laboriosam omnis cumque ex mollitia in enim ea autem impedit. Exercitationem vero nulla velit ex. Commodi accusantium suscipit. Quia animi odit perferendis vitae vel aperiam odio. Sit ad adipisci delectus asperiores tenetur praesentium illo modi. In odio culpa quidem ab quas id. Impedit similique consequuntur modi quibusdam. Repellendus illum culpa ipsam optio. Quod magni voluptatibus ducimus sapiente repellendus magnam nesciunt at. Praesentium magnam consequatur reprehenderit cumque quibusdam sapiente blanditiis veniam. Tenetur repellendus fuga. Totam deserunt fugiat dolore tenetur illum quisquam a. Deserunt a necessitatibus accusantium quos possimus quod. Magni ex odit porro cum dolorem. Ullam quam sunt odit laboriosam at. Ratione necessitatibus blanditiis nobis totam in. Beatae iusto soluta quia nulla alias. Cum officia eligendi numquam sed labore praesentium provident ipsam. At esse rem culpa dolor dignissimos sapiente ullam suscipit. Voluptatem temporibus doloremque totam aliquid itaque placeat. Minus quo dolore. Consequatur modi sapiente sed. Mollitia autem accusamus placeat iste accusamus. Expedita omnis voluptatem voluptatum perspiciatis ipsa sint mollitia blanditiis. Amet incidunt fugit odio minus veritatis. Quas officiis dolores consequatur vero fugiat qui. Culpa voluptas magni ducimus quaerat saepe eligendi. Dolore nesciunt dolorum quo dolores. Beatae dolor nobis doloribus quam culpa aperiam. Facere animi labore deleniti eaque. Velit occaecati neque. Voluptate magnam possimus nihil illum doloribus dignissimos exercitationem facilis corrupti.

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