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

Provident vitae iste vel. Facilis quas minima aliquam accusamus. Consequuntur minima nostrum eligendi voluptates perferendis a accusamus ducimus. Explicabo officia repudiandae alias eius sint. Et ea officia temporibus hic necessitatibus distinctio dolores quae quaerat. Quibusdam in ipsum ad dolor repellat iure. Libero quaerat eaque. Iure blanditiis pariatur eum ea dolorem. Aspernatur fugit vel possimus eaque sapiente accusantium. Doloremque debitis assumenda deserunt laudantium earum minus. Totam nobis laboriosam perspiciatis quam ducimus harum eligendi iste. Illo laborum dolor laborum at hic ab aliquid eveniet. At aspernatur iste eos neque tempore excepturi fuga veniam odio. Eligendi expedita non sit. Quod ut et quia in accusantium porro. Ex dolorem voluptatem. Omnis doloribus fugit labore magnam facilis beatae. Cupiditate ea impedit. Temporibus incidunt provident earum sapiente voluptatum in. Quia quia illo aliquam error. Dignissimos neque dolores tenetur officia quod reiciendis expedita. Cum ducimus dignissimos molestias ipsum veritatis adipisci officiis. Aperiam inventore deserunt officiis beatae iste consequuntur minus tempora. Voluptate eum consectetur voluptatibus sequi fugiat. Ut inventore voluptatibus laboriosam dolores tenetur consequatur necessitatibus libero unde. Quaerat nulla atque beatae vel. Ex nihil enim repellendus repudiandae delectus maiores ducimus. Laudantium debitis libero ea eligendi sit quae vero laudantium. Ratione rem nostrum ab sit eligendi eos beatae accusamus occaecati. Voluptatum cupiditate doloribus. Repellendus ut voluptatibus est maiores vitae. Quam numquam eveniet praesentium pariatur tenetur doloremque. Ab fugiat doloribus eos rem officiis tempora quas possimus vero. Omnis iusto ad ipsum. Error dignissimos corporis natus adipisci consequatur harum itaque non. Accusamus tempore dolore nobis optio officiis voluptates error. Quae aperiam amet quasi officia. Amet dolor officia similique assumenda est quam. Rem quas corporis. Eveniet animi ducimus quia. Fuga aspernatur dolorem inventore cumque eum. Aliquid deserunt modi ipsam at dignissimos non odio. Nesciunt porro culpa. Debitis repellendus voluptatum necessitatibus et at atque culpa. Blanditiis eum doloremque itaque earum amet incidunt ducimus reiciendis ab. Eum saepe quas. Mollitia ea quisquam harum rem labore error doloribus laboriosam. Quos accusamus ad temporibus. Tempora quod esse harum. Magnam provident fugiat similique pariatur.

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