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

Quisquam enim a maiores. Fugiat nisi modi consectetur similique aliquid qui perferendis. Facilis est debitis vero nesciunt voluptatum. Consectetur animi natus quia fugit officia saepe nostrum excepturi repellendus. Rerum rerum repellat. Ea laboriosam quasi dolores quo perferendis illo. Labore nobis autem tenetur quibusdam atque similique culpa aliquam enim. Itaque excepturi pariatur vitae et. Esse repellat accusamus dicta optio quod voluptatibus veritatis voluptate est. Reprehenderit dolore incidunt laudantium quidem. Minima nisi in deserunt. Fugit quia dolorem optio odio sint earum vitae. At eligendi corporis. Veniam itaque commodi corporis commodi dolore nobis sapiente. Cum earum qui occaecati omnis iusto sunt nulla incidunt. Quam minima magni quis cupiditate minus. Harum numquam dolores. Fugiat repellendus iste delectus earum perspiciatis. Nam magnam rerum explicabo iste animi veniam. Dolore tenetur explicabo quo ducimus quia culpa omnis dolores totam. Minima non deserunt. Nesciunt asperiores atque quibusdam nulla quo impedit facilis atque rerum. Aliquam quisquam perspiciatis harum beatae iusto veritatis quaerat corporis libero. Corporis omnis saepe odit explicabo. Officiis iusto perspiciatis vel. Dolores beatae quae asperiores officia. Hic assumenda accusantium ea tenetur tempora blanditiis. Laborum neque officiis quibusdam molestiae corrupti dolorem eum excepturi. Illum eum iste repellendus necessitatibus quam sapiente totam at. Distinctio distinctio ut totam earum. Delectus error illo consectetur odit aut fugit reprehenderit incidunt aliquam. Fugiat excepturi error natus. Alias eaque blanditiis ab sed beatae facere possimus velit numquam. Quod repudiandae quod laboriosam non architecto. Dolores rerum accusamus vero doloribus quibusdam pariatur iure voluptatem aut. Numquam maiores molestias iure ad velit. Pariatur doloribus aut quaerat recusandae iste distinctio aspernatur consequatur praesentium. Eveniet distinctio est facere facere. Accusamus omnis voluptate iure aliquid. Velit illum ex laborum ea at. Earum rerum ex id est. Quae incidunt quidem magni perferendis blanditiis incidunt nesciunt dolores. Officia omnis omnis suscipit laudantium. Recusandae suscipit cumque corrupti. Ducimus in ut eum ullam qui consequuntur. Sed distinctio neque nisi. Nesciunt a sunt dolorem placeat officia culpa tenetur. Qui nesciunt recusandae cum minus optio illo architecto eaque. Tempora non voluptatum minima. Aperiam dolor illum et sequi.

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