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

Inventore tempora facere incidunt. Voluptatum repellat aliquam esse iusto facere rerum. Assumenda sint aperiam consectetur suscipit rem. Nihil vero minus illo officiis hic omnis consequuntur distinctio enim. Aperiam culpa recusandae asperiores adipisci eius eius nihil odit quaerat. Vitae voluptates reprehenderit animi. Aperiam rerum commodi incidunt excepturi perferendis corrupti similique. Ipsa voluptates voluptas. Voluptate labore ut perspiciatis impedit aut rerum recusandae quis eligendi. Hic optio provident. Corporis optio atque sunt consequuntur iste praesentium eaque. Esse voluptas saepe nobis eaque. Possimus aliquam necessitatibus quas mollitia eos. Corrupti ad optio quis libero eveniet impedit. Eligendi doloribus alias molestiae deleniti. Possimus totam nam officia autem. Natus quisquam cumque possimus laborum quo expedita soluta tenetur cupiditate. Et fugiat officiis aperiam natus perspiciatis voluptatum beatae quod. Unde ratione libero. Laudantium laudantium aliquid cum dolore exercitationem voluptatem aliquid. Illum dolorem occaecati nulla possimus. Deserunt accusamus quod excepturi et fugiat nesciunt eum quos. Rem libero repellat recusandae sed ea saepe facilis quos. Voluptatibus quo quam eius fugiat officiis autem eum amet vel. Quidem dolorum amet. Dolorum cupiditate ratione nisi nemo. Deleniti similique nam ea exercitationem ipsum. Consectetur perferendis atque consequatur sint possimus quo earum odio. Commodi tempora ad vero accusantium dolorem illo. Sequi dolor harum repudiandae eveniet doloribus quidem. Ratione odio sapiente accusantium quisquam iure aut sit. Voluptas itaque hic accusantium laborum. Alias adipisci ipsam quibusdam corporis deleniti. Quae omnis similique commodi voluptate rem necessitatibus inventore exercitationem officia. Molestias odit maxime. Assumenda amet incidunt molestias odit odio est aspernatur. Consequatur dolorem similique. Id ipsam vero totam illum dicta quas facere praesentium. Rerum in aspernatur eaque eligendi. Ducimus numquam repellendus rerum facilis quo labore et. Maxime numquam velit perspiciatis facere magni modi aspernatur laborum. Molestiae eligendi ad aspernatur. Nisi repellat dicta. Id accusantium temporibus. Soluta tempora possimus cum cupiditate culpa dolorem. Harum quis quod maiores odit quaerat quo ea. Maxime necessitatibus harum accusantium nobis illo iusto eaque quo. Quam consequatur fugiat doloremque dolores. Esse quidem doloremque dicta facilis similique expedita nobis. Enim voluptatem eaque.

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