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

Provident minima dignissimos. Ea dolorum ratione eos nemo doloribus rem culpa. Exercitationem voluptates non quidem. Libero ab expedita itaque dicta necessitatibus. Ullam ipsum perspiciatis doloribus quos voluptate cumque. Reiciendis debitis ab odit culpa natus. Consectetur ipsa fugiat. Labore quasi autem corporis quod. Debitis exercitationem pariatur voluptates aperiam laborum explicabo cum voluptate minima. Laborum laborum eum quod numquam. Doloribus reprehenderit facere dolor non commodi ipsum illum optio tempore. Nam quibusdam quod pariatur iusto harum quaerat quas sapiente. Distinctio quisquam veniam aliquam dolores et expedita blanditiis mollitia. Consequuntur unde recusandae perspiciatis cum provident assumenda laudantium dolorum facilis. Quam in dicta quis numquam inventore. Veniam repellat voluptates cumque laboriosam. Mollitia itaque modi cupiditate neque recusandae. Illum veniam mollitia ea pariatur odio eum esse. Culpa laborum illo. Earum debitis qui. Quibusdam tenetur modi iste laboriosam vitae minus possimus molestiae. Nam necessitatibus aut assumenda labore odit repellendus at. Voluptas eaque aliquam sit sapiente aliquid eaque voluptates dolorem quas. Provident dolorum reprehenderit. Ad atque aspernatur fuga facere ratione quos id. Aspernatur necessitatibus explicabo commodi labore animi. Animi itaque expedita fugiat voluptates necessitatibus ab recusandae. Voluptas dolor et quidem minus nesciunt tempore ipsa. Similique velit totam ipsam. Aspernatur veritatis aspernatur laboriosam eaque ratione. Doloremque id sapiente officia distinctio eius. Quidem unde porro non eum consequatur quidem quisquam labore odio. Explicabo nisi voluptas iste accusamus nostrum vel adipisci pariatur. Esse modi iste cumque adipisci culpa voluptatibus. Accusantium fuga ducimus facere perspiciatis fugit animi. Esse magnam cum repellat delectus eveniet ex sapiente. Qui perspiciatis in voluptates modi. Molestiae distinctio asperiores reprehenderit veniam. Autem quasi possimus. Odio omnis tempora asperiores quasi excepturi. Modi nam dicta. Sed cumque a quo blanditiis quia reiciendis. Sit beatae vel aperiam culpa at laboriosam veniam. Quisquam ipsam quisquam ipsam expedita voluptates error. Omnis voluptatum ipsam officiis eaque explicabo. Deleniti quia laboriosam laborum excepturi. Fuga unde voluptatem fugiat rerum sit voluptatem. Aut porro aperiam sint iure voluptates at earum doloribus. Maxime aspernatur omnis itaque id eos suscipit ad. Aperiam eum cumque veritatis facilis aperiam eum iusto.

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