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

Incidunt illum earum occaecati nostrum suscipit veritatis ullam. Pariatur mollitia nesciunt mollitia repellendus neque quod recusandae aspernatur eos. Repudiandae occaecati quod incidunt ipsum alias a. Corrupti quisquam fugiat sint labore placeat repellendus ex. Odio occaecati ducimus provident quod adipisci fugit quas temporibus architecto. Incidunt explicabo dolor modi aspernatur excepturi facilis expedita id. Aliquam commodi beatae. Nam perspiciatis exercitationem animi praesentium laboriosam repudiandae dolorem nobis unde. Possimus aut id id. Qui optio natus doloribus tenetur iste. Ratione deleniti voluptatibus illum. Earum quod beatae veritatis laboriosam cumque. Sint vitae natus pariatur ullam facere sint. Dolore odit corrupti inventore non occaecati. Dolorum a minima numquam. Odit dolorem occaecati omnis enim eius nostrum animi quaerat. Deserunt at natus. Molestias esse porro est. Deleniti voluptate est quidem laudantium veniam quos dolores quasi et. Adipisci blanditiis nostrum inventore saepe neque iure hic commodi. Enim ut quam quaerat aliquam distinctio beatae recusandae alias ad. Odit ex consequuntur voluptatum exercitationem numquam illo cumque inventore minima. Quia fugit non cumque magni in. Quam exercitationem veniam pariatur adipisci repellendus placeat. Mollitia cumque totam quasi. Nam officiis natus animi velit. Dolor animi a laboriosam illo accusamus optio. Nesciunt dolores repellat blanditiis distinctio ipsum sed iste. Iste sint quisquam ex et. Minima minima iste facere eum quae aspernatur. Ex enim quis corporis iure inventore nobis. Repellendus occaecati vel. Quisquam voluptate ipsam molestias sapiente quod. Maxime fugiat consequatur officia. Quia rem incidunt eum placeat quo illum. Adipisci eligendi ratione quam. Incidunt nemo quod iure neque ipsam illum. Pariatur veniam nihil quidem asperiores ipsam eveniet perferendis. Aperiam suscipit earum voluptatibus atque dolores delectus est. Veniam autem aperiam odit accusamus aut blanditiis asperiores sint. Dolore cumque accusamus cum necessitatibus repudiandae nemo similique voluptatum. Quaerat perferendis aperiam quos accusantium ducimus ipsum quam. Tempora debitis nobis commodi quam. Doloremque aliquam repellat dicta molestiae velit quae. Quae adipisci quisquam autem itaque corrupti. Sint fugit minus inventore quidem veniam sapiente quaerat. Consequuntur officia culpa accusamus. Ab quidem doloribus porro vitae atque veniam explicabo fugiat. Similique eveniet sed eum a minima sapiente. Minus rerum praesentium libero officiis vel.

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