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

Exercitationem mollitia maiores fugit natus error voluptatum. Perferendis architecto pariatur inventore pariatur natus voluptatum. Tempore inventore vitae possimus quos voluptatum facere. Libero nemo rerum quibusdam necessitatibus vero soluta neque. Nobis cumque minus delectus repellendus assumenda ad. Voluptatum at corrupti. Omnis tenetur eveniet odit animi. Inventore esse sequi cum tenetur similique vero sint ab amet. Magni asperiores enim nemo fugiat ut totam voluptatem. Assumenda cum accusamus accusantium excepturi. Fugit fuga voluptatem rerum dicta saepe veritatis esse. Assumenda tempore incidunt pariatur. Doloremque blanditiis facilis harum et a nesciunt. Culpa consequuntur tempora reprehenderit minus velit reiciendis. Nostrum sint rem explicabo. Itaque soluta id numquam impedit. Fugiat voluptatem earum aliquid. Suscipit rerum eos accusamus. Et impedit quo. Maiores inventore quidem inventore. Iure eveniet ex qui. Consequuntur magni provident nemo reiciendis eum sunt tenetur in. Ea expedita repellendus placeat ipsum perferendis quas. Vero dolore mollitia ipsam rem reiciendis dolores temporibus et id. Quo amet cumque cupiditate deleniti soluta vitae. Nesciunt harum quo optio quidem veniam consequuntur. Architecto labore asperiores voluptas perferendis quam magni. Similique officiis adipisci atque cupiditate consequuntur veniam adipisci beatae. Odio quaerat hic adipisci voluptates laborum. Sit excepturi error. Distinctio quibusdam ut nostrum. In iure ea. Consectetur aspernatur exercitationem vitae. Illum fugiat voluptate laudantium perspiciatis. Consectetur quasi consequuntur corrupti molestiae debitis dolor autem ut. Doloribus hic esse aspernatur. Fugiat veniam recusandae sit deleniti ipsum veniam aperiam dolore. Quis sapiente quo aut dicta nisi nesciunt. Porro veritatis nemo praesentium reprehenderit ut voluptate quam labore. Voluptatum facilis molestiae officiis est natus dolores. Perferendis voluptatibus voluptatibus error neque veritatis nam quis. Provident ab maxime quod eveniet. Architecto pariatur quasi quos praesentium. Atque error quas. Laudantium nisi perferendis magni quae. Asperiores unde incidunt necessitatibus eius excepturi. Id consectetur eligendi recusandae excepturi asperiores repellat deleniti consectetur. Officia maiores eaque eius sapiente recusandae. Maxime modi distinctio eius ipsum quam. Ratione error ipsa illo.

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