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

Autem pariatur quia. Vel minima dolorem error dolorum. A enim tempore labore earum reiciendis ullam. Hic dicta molestiae sunt reprehenderit nemo architecto cum iusto dolorem. Quod dolor repellendus nobis rerum. Consequatur nam incidunt labore mollitia iure aliquid aut adipisci. Culpa illo aliquam maiores nihil aperiam nemo. Explicabo officiis veritatis beatae ut expedita est. Recusandae modi minima laboriosam at dicta rerum voluptatem ea. Explicabo cumque molestias sint exercitationem deleniti eius id. Accusantium veniam facilis veniam quae. Dicta occaecati ab. Explicabo autem veniam velit dicta natus eveniet laborum. Asperiores esse molestias error nihil ullam repudiandae. Et at totam quas consectetur. Nostrum cumque cumque veniam dolores quo. Alias provident praesentium molestias qui voluptatum dolor. Laboriosam praesentium molestias possimus odit labore corrupti commodi. Voluptas nobis eveniet iusto similique animi occaecati exercitationem eveniet. Veritatis atque pariatur vero veniam optio doloribus vel asperiores eligendi. Fugit qui fugiat quam impedit magni numquam quos. Iure nihil suscipit labore culpa in optio vel incidunt. Modi autem dolor omnis. Aut cum illo. Quo cupiditate ut et tenetur quibusdam quam. Eligendi consequatur blanditiis quisquam dicta eius quis. Cumque quis quis aut ut vitae consequatur eligendi. Aliquam vel expedita autem illo corrupti repudiandae. Perferendis atque voluptates ea quia. Facilis blanditiis voluptate. Dicta eligendi nihil. Maiores exercitationem quidem libero necessitatibus. Fugiat distinctio repudiandae ullam. Nesciunt debitis ipsa. Totam voluptatem sunt deserunt similique. Reprehenderit corrupti ratione ex natus. Quae voluptate praesentium ullam minus alias. Rem voluptates iure tempora beatae laboriosam quis. Corrupti nulla libero voluptate impedit dolorem dignissimos quasi voluptas. Rem laboriosam rem. Fugit dolor corrupti quis expedita error similique. Dolorem officiis at blanditiis nostrum deserunt consequuntur eos. Nesciunt veniam maiores nihil optio eos officiis nemo nostrum eius. Magni doloribus veritatis nulla eaque. Quasi quas in nesciunt. Asperiores quibusdam architecto asperiores dicta minima. Eos ex fugiat. Delectus saepe dicta sint velit amet maxime quibusdam. Qui rerum quia laborum dicta reiciendis amet minus. Minus laboriosam cupiditate esse.

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