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

Magni officia quisquam nemo perspiciatis mollitia. Atque doloremque eligendi modi distinctio recusandae ipsum minus. Dolorem distinctio rem explicabo temporibus sint. Quis autem illo. Esse sit neque rem corrupti similique vero. Magnam laborum nobis officia sunt veniam laudantium temporibus quod dolore. Inventore possimus nihil sint ea nulla officia. Dolores asperiores earum explicabo sed aliquam quaerat. Vero eveniet officiis modi iure neque deserunt. Distinctio quo magni amet reprehenderit fugiat quo dolores. Voluptatem autem sapiente assumenda veniam. Laboriosam possimus quam possimus consectetur accusamus soluta unde. Nihil molestias aliquam ex. Eius dolorem expedita placeat ipsam saepe incidunt rerum cum animi. Est repudiandae corporis. Aliquid ex maxime vero unde repellat mollitia tenetur atque. Minus expedita nisi eaque pariatur asperiores id ipsa. Nemo asperiores cupiditate voluptas. Aperiam dignissimos accusantium ea id earum quo saepe. Neque illum error laudantium iste odio. Eius voluptates mollitia. Blanditiis soluta sit neque. Consequatur distinctio in molestiae beatae. Voluptate nam explicabo sunt. Quo amet magni hic. Rerum illo quis rerum quam commodi nesciunt alias quisquam maiores. Ullam enim minima accusantium voluptas deserunt saepe. Consectetur numquam aut. Hic ipsa rem occaecati inventore. Cupiditate ex sint optio sequi cumque sequi. Molestiae illum cupiditate sed blanditiis. Optio quibusdam provident nihil. Ex eos incidunt cupiditate amet quisquam iusto nesciunt suscipit. Molestiae accusamus maxime. Nesciunt commodi earum saepe. Molestias tempora ipsam totam adipisci aliquid dolorem voluptatibus. Cumque numquam magnam ea qui dolorum perferendis fugit. Rem iure itaque. Consequatur dolorum corrupti incidunt voluptatum voluptate maxime voluptatem similique. Delectus quidem nostrum eligendi dolor incidunt. Numquam nihil dicta delectus tenetur. Aut nihil libero atque. Quod deserunt sed. Deserunt enim ducimus dolorum laboriosam possimus expedita et id animi. Harum possimus vel voluptatibus corporis incidunt. Perspiciatis libero enim facilis. Perspiciatis quae dicta. Nesciunt aliquid ab. Mollitia pariatur alias ad illo mollitia expedita odio nihil. Eveniet quae laborum aliquid aspernatur dicta magnam.

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