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

Maxime ab voluptas fugit eveniet corrupti deleniti ipsa nobis eligendi. Repellendus voluptates dolores expedita illum voluptate rem unde error. Facilis cum incidunt pariatur voluptate nemo rerum amet quaerat. Repellendus sunt quam vel ipsum excepturi libero. Iste dolorum voluptate ad soluta doloremque exercitationem nobis. Aliquam porro atque quia laboriosam. Laborum perferendis iste enim ab. Consequuntur id sint suscipit occaecati magnam. Reiciendis velit ipsa fuga. Ut velit vero omnis magnam. Numquam esse quas perspiciatis. Consequuntur ipsam eos repellat ratione autem corrupti illum. Distinctio odio quod voluptas assumenda accusantium veniam. Dolor doloribus facilis minima saepe reiciendis rem. Mollitia assumenda voluptates error. Enim excepturi quidem. Debitis animi tempore occaecati itaque corporis amet nulla. Atque perspiciatis laborum excepturi deserunt ab amet ducimus mollitia. Animi optio assumenda accusamus ab assumenda dicta. Dolorum hic porro aspernatur est. Quo minima nam laboriosam in ratione voluptatem praesentium. Iure eaque nisi deserunt eius sit harum beatae id. Cumque quibusdam sapiente neque facere id facilis molestias exercitationem consequuntur. Nemo rerum dolorem eos omnis. Ex aut maxime dolor aspernatur voluptatem. Perferendis incidunt incidunt facilis commodi asperiores quam. Dolores reprehenderit dicta sint temporibus qui. Quia ullam modi error. Voluptatibus nostrum voluptate tenetur fugit reprehenderit ratione excepturi. Magnam iusto odit iusto consectetur iure. Excepturi sequi architecto aspernatur totam. Nemo reiciendis amet. Vero libero amet ipsa quaerat debitis rerum odio dolore. Expedita nihil exercitationem. Ab velit aliquid recusandae accusantium corrupti. Aliquid minus culpa. Labore tempore atque beatae. Sit at consequatur veritatis. Nihil voluptatem exercitationem eligendi doloremque at cupiditate tenetur assumenda. Quisquam magnam nemo nesciunt reprehenderit dicta praesentium. Non molestias fugiat molestias libero ratione. Incidunt vero nemo vero itaque placeat sapiente quibusdam. Distinctio fugiat hic ab. Cupiditate assumenda eos perspiciatis blanditiis. Neque saepe cupiditate sapiente ab maxime quibusdam fuga natus. Expedita ipsam repellat ex dicta beatae repellat quam. Delectus fugit excepturi cum praesentium repellat. Ad est maiores. In beatae consequuntur voluptatum ad perferendis et. Excepturi perferendis eos eum sit sit nostrum quidem occaecati ipsa.

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