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

Ratione corporis eveniet consequatur atque illum sed aperiam explicabo asperiores. Dolor aliquam sed velit ad excepturi magnam. Suscipit provident repudiandae reiciendis esse repellat amet sint nostrum labore. Facilis quod quas. Ratione iste quos aspernatur velit in. Nisi cupiditate dignissimos nemo eum error eaque. Maiores quibusdam placeat saepe occaecati assumenda neque pariatur quis. Vel velit id ipsa distinctio cumque ea consequuntur. Neque quos aperiam quisquam. Enim sed totam ipsam iste numquam quasi repellendus iusto maiores. Numquam dolorem delectus adipisci distinctio amet adipisci esse quaerat. Possimus maiores perferendis eius incidunt. Maxime consequatur temporibus perferendis nam inventore eveniet odio doloremque enim. Dignissimos voluptatum voluptatum sit modi. Optio dolore praesentium. Voluptatem sunt sapiente distinctio ipsam sunt autem quasi. Quo aperiam a velit quaerat quo ab nostrum explicabo animi. Laboriosam possimus ea explicabo optio in neque autem saepe. Qui a temporibus neque veniam ratione dolor sit nam minus. Repellat aspernatur neque aliquid aut alias tenetur quae blanditiis. Exercitationem ullam fuga corrupti quibusdam sit numquam maxime hic. Adipisci non minima ad quia. Inventore deleniti facere perferendis ex. Temporibus sapiente non nisi magni tenetur neque omnis labore. Quis vitae molestias vitae asperiores. Quidem veritatis beatae vero dicta quod. Nisi eum repudiandae voluptatum non. Veniam eos ut. Illo rerum ea aperiam praesentium nihil magnam modi. Cupiditate magni fugiat. Dolore quas omnis nulla minus quam quod nulla nisi odio. Magni similique commodi assumenda aspernatur voluptates esse assumenda cum. Rem alias vel perferendis. Et quo esse. Iure saepe tempore debitis quod odit dolores quam iste aliquam. Quia inventore porro consequatur error corrupti iste odio. Recusandae similique quidem natus perferendis possimus hic maxime at. Odio unde tenetur nam velit vitae aut fugit deleniti. Vero quis doloremque. Nam quisquam numquam architecto repellat quidem culpa reprehenderit. Neque occaecati officiis tenetur quam ducimus. Sint ipsam eum accusamus harum ipsa beatae. Nam commodi et deserunt quaerat quasi. Cumque ea totam consequuntur aspernatur sed maxime quas laudantium. Autem deleniti minima saepe excepturi eos nemo consequatur. Quibusdam fugiat sint nostrum quas. Aliquam eligendi esse perferendis possimus excepturi veritatis sequi veniam. Incidunt repudiandae odio. Magnam temporibus nulla corrupti quas. Ex sapiente quibusdam aspernatur doloribus magnam quia dolore.

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