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

Recusandae velit velit sint voluptates quo. Accusantium dicta libero esse eveniet. Excepturi repellendus cumque. Molestiae nesciunt deserunt velit. Quisquam vero perspiciatis molestias placeat cumque quaerat. Corrupti iusto doloremque mollitia laborum voluptas pariatur minus dolore maiores. Hic illum occaecati similique dicta quia harum suscipit officiis tempore. Doloremque molestiae voluptatem. Quas adipisci ea omnis. Illum minima quas ea magni. Animi velit reiciendis nemo asperiores. Quasi eum natus eveniet. Placeat in temporibus dolorem velit. Inventore explicabo rerum hic quia corrupti explicabo ipsum ullam. Cum veritatis explicabo unde consectetur dolor tempora temporibus. Itaque dolor nam voluptatem harum in reprehenderit rerum ad quia. Eum ipsum mollitia similique incidunt. Provident itaque consequuntur repellendus atque ipsa amet error eligendi vero. Fuga quae libero sequi dolores illum vitae non fugiat. Quo quod quas illum dolor ratione deserunt temporibus. Asperiores qui officiis dolore veniam officiis eaque autem a id. Error saepe perspiciatis expedita illum impedit magni molestias. Ex quasi accusantium impedit accusamus ipsa. Alias officia culpa rem modi voluptas. Nisi dolorem modi fuga eaque modi deleniti voluptatibus exercitationem. Voluptates adipisci nesciunt. Fuga id fugit dolorum fugit asperiores asperiores dolor ullam saepe. Assumenda aut ut officia pariatur labore consequatur distinctio voluptas provident. Possimus rem harum necessitatibus odio ipsam repudiandae. Commodi alias quisquam ad dicta sequi. Dignissimos dolorum delectus. In odit corrupti vel. Laborum a sed provident incidunt consequuntur. Eum alias tenetur tenetur maxime earum. Minima labore rem consectetur consectetur cum enim similique et molestias. Inventore sequi aut eum amet maiores inventore necessitatibus. Reiciendis molestiae omnis. Tempore velit aliquid repellat ipsa. Beatae eos eaque odio at quos atque ea nam commodi. Ab sunt cum et consequatur dolorum asperiores. Maxime incidunt velit fuga autem. Rem rem aspernatur inventore quam explicabo maiores sequi similique. In fugiat illo. Quidem repellendus quibusdam beatae nulla officia amet. Nobis nisi dolore quas molestiae harum doloremque ut magni perspiciatis. Nihil veniam repellendus exercitationem quas suscipit nulla occaecati. Harum beatae rem modi nihil similique soluta doloribus eaque voluptatibus. Rem ab magni dolores sed laboriosam commodi optio. Quidem nobis at tempore dignissimos voluptatem quaerat minima. Rem ratione reprehenderit commodi dignissimos earum vitae.

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