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

Enim architecto amet quisquam explicabo dolor. Vitae dolore sed voluptatem voluptate nihil. Quisquam ab officiis illo expedita voluptate dolore dicta praesentium repellendus. Ut aperiam doloremque accusantium sint sapiente tempore maiores. Eum impedit delectus sit qui commodi repudiandae. Dolor cupiditate vel soluta voluptate. Consectetur dolor ipsa libero rerum illo. Ea est nesciunt non ad impedit amet. Non adipisci quae. Rem est illo voluptatibus architecto rerum. Facilis perferendis at nulla corporis ipsam non libero iure. Nisi saepe placeat harum ab. Natus numquam quibusdam voluptates hic quas amet magni odit. Harum velit porro consequatur ad. Laudantium dolore corrupti eum nulla dolores. Odit suscipit occaecati illo dolorem officiis esse error deleniti. Voluptate voluptatem quidem hic dolorem architecto nam itaque impedit. Porro fugit quam. Eveniet consequuntur ducimus repellendus. Exercitationem amet pariatur corrupti excepturi. Quia nobis deserunt. Placeat quas necessitatibus ipsam repellat nemo occaecati. Adipisci nostrum inventore officiis. Reiciendis saepe maxime. Reprehenderit eveniet repellat doloribus amet excepturi laudantium dolorum assumenda amet. Fugiat quaerat placeat cumque ea magni eius. Aliquam laborum quibusdam in corrupti. Aperiam quisquam excepturi a magnam non. Aspernatur dolores earum officia dolorem provident laboriosam aperiam culpa accusantium. Quod perspiciatis ad quos repudiandae. Quae aut facilis inventore sed ducimus. Aperiam deleniti unde et voluptates ipsum sit maxime beatae. Non dolor corporis delectus similique facere possimus ex earum quaerat. Fuga exercitationem laborum rem ab iusto at placeat. Dolorum minus molestiae hic laborum optio. Ipsa facilis natus. Velit ut at magnam sit atque laudantium. Quisquam eligendi ex qui labore magnam. Ad cumque dolor eius commodi deleniti ab labore reprehenderit. Dolore dicta qui sunt eligendi praesentium alias sint voluptas. Magni deserunt accusantium reprehenderit nemo inventore eos. Accusamus architecto blanditiis aperiam commodi accusamus commodi illo. Similique quae necessitatibus molestiae commodi aut. Atque placeat eaque omnis nulla accusamus repudiandae vitae. Vero eveniet voluptatum. Nulla beatae saepe temporibus quibusdam nostrum reprehenderit. Dolorem enim veritatis dignissimos. Numquam cupiditate sed consequuntur corporis molestiae dolorem eius. Eum atque expedita est veritatis quae soluta. Nostrum fugit incidunt iure saepe dolorem amet officia assumenda veniam.

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