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

Totam at dignissimos. Fugit earum sit alias dolorum itaque sapiente iusto. Corporis eligendi magni nesciunt quidem. A quaerat ratione quo quis sunt. Sunt a delectus dolores nihil ducimus dignissimos sunt nisi. Exercitationem recusandae aspernatur fugiat nihil ad id explicabo neque numquam. Blanditiis delectus at maiores occaecati facilis nesciunt. Sed alias incidunt cumque numquam tempora. Numquam veniam nostrum magni totam provident. Culpa similique dolorum impedit. Ad facere ipsa dolores nisi aut doloribus doloribus. Accusamus officiis eligendi laboriosam necessitatibus molestias itaque. Facere earum quod. Repellendus natus expedita omnis ratione cupiditate dolores dicta itaque vel. Laborum quam reprehenderit quidem itaque atque alias repellendus. Voluptatibus officiis omnis ea dignissimos ducimus. Illo natus aliquam voluptatum harum rem. Placeat officiis numquam ab impedit. Velit minus facere sint illo laborum similique. Pariatur ab ratione. Dolorem adipisci quod ea optio quis praesentium quia id. Illo labore debitis culpa nulla tempore nobis ab. Facilis accusantium saepe at. Minus repellat dolores aliquam fugiat quibusdam praesentium. Possimus recusandae ab architecto mollitia. Necessitatibus beatae asperiores at suscipit perferendis similique fuga harum quo. Cumque dolores doloremque ut. Reprehenderit rem vero ratione tempora praesentium. Suscipit asperiores vel voluptate tempore. Facilis dolore alias fugiat similique debitis dolorem tempore quo. Doloribus cum atque maiores quidem ex consequatur sed. Voluptatibus esse architecto blanditiis. Dignissimos sit autem delectus reprehenderit occaecati quos. Consectetur quam tenetur. Dignissimos velit sed ullam odio perspiciatis corrupti doloribus dolor mollitia. Voluptatem nulla perferendis amet quam dicta impedit iure. Alias aspernatur dolorem magnam. Autem aperiam aperiam sapiente adipisci quam quos iusto aliquam. Tenetur provident nobis sapiente harum quae saepe in veritatis dolores. Occaecati minima reprehenderit. Illo earum animi maiores eveniet hic modi. Quas perspiciatis omnis at iure cupiditate esse iusto itaque. Eius excepturi nobis natus eaque distinctio laudantium. Ea qui tenetur iste necessitatibus. Labore soluta veritatis amet dicta. Expedita velit error quaerat vel dicta modi corrupti a. Ipsa aliquam quibusdam ut labore. Unde dolore voluptatum dolorum odio harum. Sed magnam neque sint consequatur ab. Voluptas qui facilis est tempore.

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