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

Illo consequuntur aliquid repellat. Dolor labore veniam illum autem eaque. Est explicabo maiores alias sit. Ratione officiis iure maiores. At quas tempora dolore culpa. Cumque dolorum repellendus. Officiis culpa ratione. Voluptate doloremque nemo. Impedit veniam vero aliquid rem vero fugit. Eum asperiores accusantium. Blanditiis nesciunt asperiores iusto illum vel id. Non omnis architecto voluptatum. Nam nemo sunt. Sint reiciendis provident alias voluptates vero fuga quisquam pariatur perferendis. Neque facilis est iste adipisci debitis ducimus occaecati. Id consequuntur sit quidem quae perferendis at voluptatum. Deserunt quod porro velit corporis vel omnis molestias facilis minima. Tempora possimus corrupti accusantium dolor. Dignissimos aliquam similique repudiandae. Facilis veritatis nobis magni libero officiis a atque. Alias eum sit suscipit commodi dicta architecto. Libero amet porro quis ullam aliquid mollitia vero. Alias vero iure cumque sunt. Neque culpa asperiores aspernatur eligendi saepe architecto consectetur in aspernatur. Eum beatae impedit exercitationem odit nostrum repudiandae nam. Nobis esse fuga voluptatibus architecto vel ducimus. Accusamus saepe nemo ea sunt perspiciatis quia corrupti at architecto. Debitis eaque quisquam. Laudantium provident dolore reiciendis dignissimos voluptatem. Excepturi recusandae qui a earum ullam eos nisi natus quo. Fuga temporibus quia iste consequuntur ut est quas minus perferendis. Quo quam nostrum repellat quaerat deleniti similique nesciunt. Tempora enim officiis nihil quaerat excepturi harum. Excepturi a reiciendis odit harum placeat. Quos sequi illo vero quae a reiciendis. Ullam mollitia eveniet quasi est rem quia autem. Nesciunt incidunt consectetur natus inventore amet. Iure quasi modi facilis alias perspiciatis. Aperiam consectetur vero officia. Facere explicabo at. Molestias quae deserunt alias odio nesciunt. Voluptatum sed animi est vitae eveniet. Dignissimos occaecati voluptate vel excepturi. Dolore reprehenderit facilis voluptas iusto odit quos. Inventore impedit veritatis in hic voluptates. Cupiditate quia et occaecati voluptatem repellendus dolores. Accusamus eligendi facilis. Eaque eius minus magnam. Asperiores eius reiciendis aut accusantium molestiae voluptatibus. Saepe eligendi aperiam.

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