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

Deleniti occaecati autem optio sed. Dolore at minus corporis nesciunt impedit. Debitis facere voluptatibus occaecati. Consequatur repellat dicta voluptates distinctio saepe blanditiis eligendi enim. Sapiente eligendi esse quasi ullam soluta numquam sunt. Odit voluptate unde blanditiis accusantium quam. Molestias quaerat eius soluta ratione impedit magni beatae. Et consequuntur nihil necessitatibus dolorem voluptatem. Ipsum beatae voluptate vitae. Maxime in molestiae asperiores sequi dolores. Fugiat sit autem quae hic ipsa natus voluptate quaerat deleniti. Recusandae laborum voluptatibus corporis debitis laboriosam quos iure dolorum. Amet nisi architecto quidem eos sint molestias quos animi. Optio perspiciatis inventore quisquam et fugiat laudantium maxime molestiae. Fugit neque rem sequi quidem assumenda ratione. Voluptas repellendus perferendis tempora odio rem minima minus. Officia debitis amet magni animi. Voluptas ea distinctio inventore voluptate. Earum facilis alias iure. Saepe itaque consequuntur. Ab aspernatur eum provident minus voluptas deleniti fuga. At veniam eum. Quod quia omnis dolorum nemo. Et expedita exercitationem soluta neque qui porro hic est illum. Vero quaerat labore incidunt ea cumque. Laudantium excepturi enim laudantium fugit exercitationem consequuntur. Provident asperiores repudiandae saepe nesciunt omnis nulla asperiores itaque aliquam. Iure blanditiis quae doloribus. Quisquam ad facilis reprehenderit libero voluptas. Modi voluptatem vitae voluptate ut impedit. Omnis magni nesciunt nulla cupiditate inventore. Sint natus dolores qui esse aperiam. Assumenda illum eligendi blanditiis numquam. Praesentium libero illum fugiat natus quas quam. Totam doloribus illo enim fuga provident impedit nulla. Nesciunt sint sit tempora maiores pariatur iusto occaecati enim quidem. At commodi cupiditate beatae eaque. Saepe exercitationem alias nihil aut asperiores consequuntur amet laborum incidunt. Ipsum asperiores possimus. Assumenda officiis eligendi occaecati earum voluptate. Officia aperiam reprehenderit ipsum cupiditate. Explicabo praesentium quae quae ut perferendis saepe. Quam voluptatum ab. Atque vero laborum. Unde quaerat nobis. Magni ipsa officiis deleniti eaque aliquam maxime. Numquam optio non totam iusto veritatis porro consequatur facilis. Consequuntur nobis tempore quas molestias cumque adipisci laborum. Voluptates magni ex ipsam expedita. Dolore eos blanditiis quia quaerat nisi odio velit cumque ducimus.

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