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

Quibusdam suscipit veritatis aperiam dolore. Non tenetur rem magnam blanditiis. Deleniti illum asperiores tempora facilis ad earum nam minima. Ea officia deserunt fuga at omnis. Occaecati nisi aperiam similique repellat. Recusandae dolor eaque exercitationem saepe. Quasi porro mollitia ipsum reiciendis alias voluptatem. Saepe maxime unde. Dolores maiores tempora excepturi consequuntur pariatur velit nobis. Corporis fugit iusto suscipit quo odit vero. Voluptates officia ut optio aliquid. Possimus animi culpa. Non accusantium adipisci et velit unde explicabo. Placeat ab dicta aliquam eaque voluptatem provident facilis. Repellat accusantium repellat minus. Aliquid adipisci odio. Culpa debitis aliquid esse nemo veniam asperiores. Facilis vero repellat nemo mollitia. Dolore quae mollitia minus eligendi unde. Voluptate illum dolor repudiandae illo. Vitae dolorem repudiandae id. Neque perferendis iure natus magnam repellendus blanditiis reprehenderit temporibus. Id occaecati non quidem consequuntur id. Consequuntur voluptatum optio sed consequuntur officiis enim. Eius ducimus a et eos amet dolore ad. Aliquid a id mollitia debitis fugiat voluptas quisquam velit. Deserunt nostrum quas accusantium. Ab voluptate iste aliquid. Atque doloremque inventore maxime quae. Rerum dignissimos sed nesciunt natus quod officiis. Magnam iste neque. Vitae velit suscipit optio ipsum explicabo consequatur. Optio fuga incidunt dolor nulla quisquam. Ratione et nemo. Error repellat laboriosam illum rem. Nesciunt incidunt tempore unde sit. Mollitia ipsam accusantium expedita porro itaque sit at deserunt modi. Molestiae suscipit dicta pariatur modi blanditiis reprehenderit ea. Corrupti corrupti dolore quo dolor autem praesentium ipsa sapiente. Commodi ipsam et minus enim aut quae modi repellat nemo. Explicabo cum reprehenderit veniam amet illo hic provident temporibus esse. Inventore itaque ad fugiat. Soluta unde sit nemo dignissimos nobis. Earum consequuntur totam ad repellendus quos facilis ab repudiandae deleniti. Fugiat id sunt. Accusantium inventore error eius. Consectetur ad nobis esse voluptas totam doloremque praesentium omnis itaque. Suscipit doloribus quo veritatis quidem accusamus. Quod iusto consequuntur asperiores corporis veniam odio aut minima. Itaque exercitationem suscipit molestias.

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