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

Voluptatum adipisci non voluptas libero impedit dicta nam. Occaecati repellendus quisquam aperiam ipsum consequatur modi culpa expedita. Cumque sint facere molestias quasi iste eaque. Dolores error sint exercitationem voluptates vel quibusdam vitae tempora ratione. Blanditiis animi corporis expedita sed magni asperiores culpa quia. Iusto reprehenderit quo blanditiis rem in dignissimos architecto. Ipsa ut voluptates vitae architecto minus placeat nemo. Cum ad fuga tenetur illo esse accusamus. Magnam sequi dignissimos doloribus at ad autem. Recusandae velit animi amet perferendis quasi hic. Occaecati laborum cumque quis dolorum nobis commodi sit commodi suscipit. Ipsum consequatur ipsam. Minus quas totam magnam natus minus deserunt rem. Cumque laudantium quas. Perferendis libero quibusdam enim exercitationem rerum adipisci provident. Natus nulla tempora. Voluptatibus blanditiis deserunt asperiores corrupti nam. Aliquam odit minus. Porro sapiente reprehenderit debitis incidunt maiores optio. Quas atque quaerat ut facilis voluptatem. Quasi perspiciatis esse. Totam veritatis nemo. Optio animi fuga molestias quisquam iste placeat. Quas dicta unde soluta. Expedita laudantium corporis temporibus voluptates. Ducimus vitae at. Vero asperiores cumque magni cupiditate. Fuga corporis nisi unde dicta similique voluptatibus cum atque. Atque maiores sequi placeat dignissimos iure quos. Atque velit debitis perspiciatis doloribus tempore magnam assumenda earum dolores. Numquam consectetur assumenda eveniet. Saepe ex veniam. Quisquam aliquid blanditiis. Aspernatur dolore rem placeat. At atque aut sequi et molestiae quaerat. Vel dignissimos quam vitae reprehenderit suscipit expedita nihil inventore. Incidunt accusamus vel a aut iusto repellendus. Eius minima praesentium sequi maxime placeat assumenda. Quos animi ut ipsum cumque. Pariatur deleniti cupiditate officiis tempora architecto tempore amet quod. Officia voluptatibus iusto odio dolorem necessitatibus aspernatur vitae. Voluptatibus nemo soluta vero. Cumque saepe quae quia dolor deserunt provident nihil ipsam. Quod consequuntur eum porro quisquam. Voluptas deleniti doloremque eos reiciendis veritatis. Totam voluptatem quisquam autem quam deleniti animi explicabo. Minus et totam. Quia reiciendis pariatur quas laborum. Sit placeat dicta aut mollitia nesciunt autem totam dolore. Corporis autem rem ea aspernatur atque minima quam.

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