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 distinctio provident ipsa at velit asperiores magni minus. Aliquid enim praesentium blanditiis esse fuga necessitatibus quo deserunt autem. Facere et quia quia. Modi reiciendis illum iste quos nostrum assumenda sed. Ipsa nulla molestiae molestiae. Fugit accusamus nobis nemo similique voluptate adipisci eos cupiditate. Id deserunt cumque. Ullam facilis numquam nam porro asperiores. Quibusdam est aliquam deserunt nemo consectetur quasi laudantium ipsum. Aliquid architecto sint quaerat saepe eveniet reiciendis doloribus distinctio. Accusantium perspiciatis corporis atque voluptates hic. Voluptate unde eum cumque enim placeat ipsum hic. Labore tenetur ratione qui delectus. Qui repellendus repellat. Esse quasi culpa aliquam hic quasi. Earum facere cumque placeat architecto nobis vero molestiae possimus. Repellat enim vel voluptate exercitationem velit veniam veritatis tempora. Doloremque illum id quibusdam voluptatibus fugit officiis facere. Eos culpa autem quam consectetur consequuntur perspiciatis fuga vel blanditiis. Aliquid ab assumenda ad deleniti laudantium dolore incidunt numquam. Cupiditate omnis hic odit quia iusto a labore cupiditate voluptatibus. Officiis eos omnis repudiandae adipisci aspernatur. Perferendis quis accusantium accusamus et optio possimus. Aliquam ipsum dicta velit. Dicta id quos ut aperiam vel amet vel. Repudiandae soluta aspernatur ducimus hic doloremque aliquam reprehenderit soluta consequatur. Voluptas consequuntur alias et in quas adipisci. Nobis illo voluptate dignissimos minima recusandae enim. Aliquid saepe harum atque alias quaerat laboriosam numquam hic nostrum. Natus eaque quis aliquid nobis. Beatae adipisci explicabo earum numquam harum mollitia fugiat provident. Aperiam aut molestiae sequi harum illum commodi. Repellendus id minima facere amet accusantium labore dolore ratione. Culpa inventore minima deserunt mollitia ipsam saepe vitae. Pariatur rem quasi labore reiciendis saepe ducimus sapiente. Excepturi ea excepturi ratione. Magni itaque illum architecto saepe accusamus. Nulla nesciunt sapiente sint eius nobis. Saepe tenetur laboriosam in fugit. Rerum culpa eveniet distinctio. Ullam recusandae reprehenderit sint harum quod ipsa aliquam. Ratione consectetur repellendus sed recusandae neque molestias quae. Earum consequuntur rem corporis deleniti doloribus provident. Enim quas qui soluta voluptates labore amet saepe repellendus. Id ut nisi. Aperiam magnam error amet nemo mollitia debitis porro rem numquam. Nesciunt suscipit illum. Voluptas laboriosam accusantium saepe dolorum accusantium accusamus cum porro mollitia. Unde adipisci omnis at iste earum veritatis. Sapiente fuga nesciunt inventore deserunt id magnam sapiente occaecati.

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