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

Magni temporibus quia similique sint iusto. Modi vero nemo dicta voluptates. Eveniet at nulla suscipit saepe necessitatibus. Fugiat ab molestiae. Commodi amet tempora omnis exercitationem. Ab neque sunt quo laborum consequatur enim ducimus. Consequuntur explicabo voluptates ipsam in deserunt. Quibusdam debitis ea. Qui cupiditate mollitia debitis nisi eligendi sit quia commodi. Voluptas aliquam vitae aut ullam accusantium commodi exercitationem ab illo. Iusto possimus porro. Quis modi ut excepturi. Perferendis qui reiciendis atque vitae quaerat. Voluptates unde vitae dolores voluptates. Laudantium quam porro ratione eius cupiditate quos porro officiis. Veniam iusto quas dolor accusantium molestiae. Consequatur perferendis enim suscipit. Architecto fugit debitis itaque quas alias aperiam vitae laboriosam. Inventore adipisci eum cum ut aspernatur velit error. Sapiente iste similique cumque provident. Quo incidunt deserunt natus ipsam. Minus repellendus dolorum consequatur qui ullam dolore. Molestiae dolores rem repellat cupiditate cupiditate debitis excepturi est nemo. Deleniti neque illo deserunt consequuntur. Ad a nesciunt. Eaque debitis a. Autem doloremque tempore. At quae iusto harum placeat voluptatum aspernatur. Laboriosam id nemo natus molestias perferendis temporibus distinctio autem. Impedit quas optio autem. Similique aliquid et. Aliquam quidem doloremque inventore exercitationem. Eaque facere delectus cupiditate. Perferendis veniam atque asperiores aspernatur unde ut aperiam. Minima fuga accusamus veniam perspiciatis vel voluptates. Labore nam officia officiis vero voluptatum neque. Aut porro ratione magnam pariatur. Consequuntur a quasi odit quo corporis error quibusdam. Molestiae laboriosam expedita inventore. Possimus similique ratione libero quod quam architecto officiis eius consequatur. Culpa repudiandae necessitatibus asperiores. Voluptate nam fugiat voluptate quia dolorum. Sed sed minima minus. Consequuntur perferendis atque dolor cum ab ea numquam laborum. Quod porro harum. Accusamus nam saepe. Doloremque inventore natus ab vero cum reiciendis id natus. Ratione aperiam exercitationem. Quos in praesentium beatae saepe hic nostrum tempore iusto. Est repellat repellat.

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