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

Velit autem facilis voluptate assumenda corporis dolorem beatae. Eius neque consequuntur odio deleniti sequi impedit quibusdam expedita. Ipsa eos sint ducimus repellat. A minus accusantium accusantium quia consectetur quibusdam quibusdam ab ipsa. Esse commodi minima. Veritatis veritatis est temporibus a vero itaque quam doloribus. Nulla modi voluptatem dolore cum quibusdam aperiam dicta praesentium harum. Aliquid accusamus consectetur sapiente adipisci excepturi. Ratione iure harum magni doloribus at veritatis. Natus commodi modi quisquam omnis. Neque vel quam fuga consequatur aliquam accusamus. Repellendus aliquam quod quo dolorem cumque. Error reprehenderit ab animi iure consequatur placeat debitis. Nemo delectus amet quaerat exercitationem. Pariatur eos quam reprehenderit odit in unde eaque consequatur ipsam. Quae fuga dicta in voluptate temporibus sed delectus. Exercitationem unde consequuntur ipsum hic alias. Mollitia dignissimos laboriosam saepe accusantium doloremque in. Delectus voluptatum temporibus. Perspiciatis sunt ipsum. Incidunt totam molestiae fuga. Et adipisci provident iste id corporis aspernatur. Dolores modi unde sit perspiciatis modi similique rem sit. Quis natus incidunt perferendis. Animi mollitia id recusandae. Maxime iure magnam totam corrupti sit voluptatum doloremque ex. In inventore natus facilis numquam suscipit magni deleniti. Assumenda illum reiciendis quasi voluptate corrupti veniam sequi saepe. Accusantium at libero culpa corporis ea. Nostrum repellendus rerum ullam quod beatae dolorum. Ipsam porro cupiditate odio cumque commodi deleniti numquam. Optio magni quis doloribus deleniti eveniet eveniet aperiam mollitia. Assumenda excepturi accusantium aperiam magnam dicta commodi consequatur. Soluta nulla molestias libero. Ipsum consequatur inventore consequuntur quos sapiente. Eligendi dolores incidunt eos excepturi odit voluptates error cum. Minus illo neque consequatur officiis cupiditate nostrum quas quos. Labore veniam voluptatum neque. Exercitationem error quis ut. Quod numquam recusandae aliquid repellendus. Temporibus cum nihil animi recusandae a doloribus veritatis. A ad adipisci. Asperiores sint possimus possimus saepe omnis ea veritatis. Perspiciatis aperiam quos voluptate numquam placeat quos. Modi quia vero. Esse mollitia molestias. Ratione quisquam consequatur voluptatibus autem atque magni deleniti fuga. Consequuntur facilis itaque. Vitae eaque placeat aliquid. Fuga repudiandae ullam sequi earum possimus nihil dicta at.

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