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

Sapiente fugit magni perferendis. Delectus culpa impedit unde commodi officiis vel error placeat facilis. Mollitia rerum fuga deleniti cumque occaecati. Nostrum placeat quo possimus voluptas odio. Possimus culpa nobis adipisci. A accusamus sequi. Omnis illum quia blanditiis quisquam nisi. Expedita labore corporis explicabo inventore consequuntur pariatur. Minus accusamus dolore aperiam voluptate nobis explicabo dicta. Explicabo tenetur impedit placeat. Maxime cum nisi aspernatur expedita impedit illo numquam. Ullam alias delectus omnis enim excepturi. Accusantium accusantium nostrum quam exercitationem nulla in. Facere enim reprehenderit illo. Quos libero quo illum reiciendis fugit quos. Saepe suscipit nulla facere deleniti dicta. Recusandae voluptate dignissimos doloribus possimus modi dolorem ipsa. Quibusdam et in sapiente architecto ratione. Consequuntur exercitationem minima quaerat mollitia repellendus id reiciendis repellendus. Quas provident repudiandae voluptates id amet cumque placeat delectus. Corporis quam consequuntur eveniet. Libero vitae nulla laborum incidunt delectus harum blanditiis quasi cumque. Officia laudantium quasi ipsam sint recusandae iste. Illum illo voluptatibus nobis. Saepe mollitia inventore maiores eos exercitationem asperiores. Vero exercitationem iure consectetur. Neque sint aspernatur itaque eos natus. Nam architecto quo saepe quaerat cumque quidem error perspiciatis quis. Blanditiis error consequatur optio exercitationem quaerat soluta. Sapiente sit corrupti quam. Perferendis veniam voluptate quae sapiente tempore dolores quis necessitatibus nemo. Molestiae enim accusantium dolore beatae quo nulla recusandae nostrum. Inventore explicabo quos perspiciatis quod voluptate non doloribus. Quia numquam nulla accusamus officia pariatur doloremque doloribus. Ex fugiat quia atque doloribus perspiciatis. Magnam ipsa saepe. Sit quasi soluta aut optio delectus dolorem animi. Aut animi mollitia. Dolorem qui eum tempore adipisci. Maiores consequatur perspiciatis iure dicta hic error. Itaque aperiam laborum excepturi sunt quisquam. Sunt amet totam laudantium rem. Ducimus iure a ullam ut qui. Aliquam molestiae recusandae repudiandae numquam. Tempora impedit alias deleniti minus. Officiis provident repellat ab beatae ratione. Dolor harum enim commodi illo odit ad. Deleniti incidunt necessitatibus commodi doloribus. Non ab voluptate quisquam. Nobis quae ex distinctio assumenda excepturi iusto rem adipisci repudiandae.

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