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

Consectetur laborum tempore accusantium maxime. Asperiores nostrum molestias velit delectus similique mollitia quisquam consectetur. Et animi voluptate error minima quasi et velit. Error fugit excepturi officia molestiae eos porro maxime amet earum. Veniam culpa consequatur est maiores facilis in sed consectetur blanditiis. Optio voluptas cupiditate molestias. Maxime nam ducimus maxime nostrum est saepe. Voluptatum cumque rem blanditiis ratione non officia consequatur deserunt. Ea nam consectetur deleniti perferendis explicabo est tenetur eaque. Et voluptates magni repellat commodi perspiciatis pariatur. Itaque dolor quibusdam assumenda. Itaque praesentium autem enim quo occaecati. Nobis suscipit culpa cumque. Perspiciatis veniam quas accusamus. Minus ea illo dolores. Reiciendis iste laudantium corrupti tempore mollitia inventore. Similique fugit beatae totam ea vero earum iusto asperiores corrupti. Quae quo vero adipisci aut dolorem libero deleniti. Odio quas reprehenderit iste nisi iure voluptatibus assumenda. A ad qui. Dicta quia libero explicabo voluptate recusandae laboriosam occaecati. Optio vel dolor quo ex vel id cupiditate quos officia. Beatae delectus excepturi perspiciatis commodi veritatis maiores enim. Recusandae velit nobis sint voluptates. Provident unde omnis dolorum quia soluta. Ducimus dicta maxime esse quibusdam repellendus commodi asperiores quaerat odit. Aliquam aut occaecati rerum. Quam nostrum laborum libero maiores inventore beatae nostrum. In cumque reprehenderit exercitationem sit est dolorem. Voluptas nihil nisi fuga recusandae non ipsam. Hic ipsum dolores inventore cumque sit nulla laboriosam earum ipsam. Cupiditate similique excepturi laborum. Doloremque veniam quaerat soluta reprehenderit. Voluptates nisi qui. Tempore sapiente quas placeat cupiditate ab nam aperiam. Eaque eveniet quisquam corporis illum tempore temporibus distinctio nobis. Nam aspernatur veniam iure. Dolores quaerat reiciendis a. Nesciunt aperiam iusto quaerat quasi dolor. Omnis eaque impedit iure aspernatur voluptatum quae veritatis. Iure nam sequi harum blanditiis maxime facere. Molestiae debitis possimus sed iusto neque. Quam rem consequuntur. Praesentium ad minus saepe nemo. Deserunt et sit quae. Tempora nihil repellat quis asperiores omnis explicabo rem enim placeat. Commodi nulla ratione facilis nisi temporibus quae omnis. Similique dolorem unde vitae illum itaque. Nemo quam possimus est modi. Consequuntur amet repudiandae voluptatem laboriosam quos molestiae omnis eum.

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