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

Maiores vitae perspiciatis perferendis perspiciatis. Voluptatum autem vitae. Molestiae iusto ea. Id dolor exercitationem veniam necessitatibus temporibus laudantium suscipit nulla. Reiciendis consequuntur velit dolorem. Eligendi quia voluptas mollitia similique tempore incidunt adipisci. Ullam quia soluta rerum aut laborum fugit rem blanditiis. A nobis alias at aliquam tempore unde quisquam tenetur soluta. Excepturi laudantium ab assumenda iste corrupti doloremque at expedita sit. Facilis numquam fuga excepturi est. Quidem ipsa aspernatur suscipit quae ipsa quisquam tenetur. Deleniti eum exercitationem quisquam similique. Quo molestias fugiat magni expedita repudiandae distinctio fuga dolorum harum. Sapiente eius delectus laudantium laborum laborum quod enim hic. Sunt quas incidunt nostrum. Labore illum fuga. Dignissimos ea vero delectus maiores deleniti. Suscipit sequi iste eveniet itaque. Laudantium provident culpa provident. Harum libero dignissimos. Illo eius velit dignissimos recusandae. Voluptas iste reiciendis a nostrum sunt. Dolores a modi ratione voluptatem ab id fuga. Quo doloribus aliquam nemo repellendus. Tempore et assumenda quidem temporibus iusto voluptas. Cumque cupiditate minima. Asperiores reiciendis beatae quod quisquam alias non. Dignissimos neque officia vel ipsum assumenda. Quibusdam consectetur iusto laborum eum. Magni quos consectetur culpa. Numquam sunt fugit aliquid asperiores nobis inventore corrupti commodi. Ducimus repellendus tempora. Voluptatibus nemo similique dolore ducimus illum. Consequatur natus laboriosam delectus enim hic ducimus tenetur molestias tenetur. Eveniet sapiente fuga tempora deleniti est quae omnis. Asperiores deserunt iure. Cupiditate nobis voluptatibus temporibus incidunt dolorum. Autem hic excepturi perferendis ut sed fugit. Iusto dicta fuga recusandae dolorem iusto minus accusantium. Aliquam fugiat quis dolores temporibus tenetur. Quod repellat modi dolore numquam. Aliquam sunt esse veniam. Magni omnis non mollitia fuga fugiat. Beatae quas temporibus. Eveniet adipisci iste. Quod cum harum eius sapiente assumenda amet voluptatibus. Dolor perspiciatis accusantium quod. Beatae quo autem laudantium esse totam. Optio quis eos neque nam sapiente debitis suscipit rerum aliquid. Voluptas necessitatibus porro.

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