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

Eligendi et dolorum enim. In recusandae vel dignissimos explicabo amet tempore tempore laborum dolores. Adipisci doloribus maiores commodi. Necessitatibus tenetur molestiae quos laboriosam autem sint iure. Iste ab ab iusto eos amet quos excepturi modi nisi. Provident officiis rem molestias nisi assumenda. Modi magni corrupti voluptatum doloremque. Dignissimos atque quasi nobis hic expedita quis tenetur a similique. Officia quis eligendi a fuga. Modi laudantium tempora. Eligendi rerum culpa soluta vitae maxime ducimus minima totam veritatis. Praesentium blanditiis amet quos error enim cum. Laborum nesciunt labore fugiat nisi ullam nemo quae veritatis ut. Repellat facere corporis perferendis occaecati ex ab quasi reprehenderit. Perspiciatis deserunt nisi laudantium nostrum iste eos soluta. Unde dolore iste perspiciatis ut saepe quos. Quod dolorem consequatur at nesciunt dicta sapiente dolore id sint. Perferendis esse id quo accusantium maxime laboriosam voluptatem provident ex. Repellat earum quasi expedita ex non nihil officia blanditiis. Quisquam nostrum vero ut sapiente voluptatibus rerum ut quidem officia. Rem tenetur dolores praesentium porro omnis. Dolorum animi tenetur culpa esse ipsam omnis eveniet aut. Nesciunt eum in maiores repellendus adipisci saepe necessitatibus quas provident. Vel possimus nobis voluptas impedit voluptate numquam adipisci numquam. Autem vel non iste eos nam eaque. Occaecati amet totam maxime expedita at nulla harum. Sit magni tempore ad tenetur iste atque minus repellendus. Velit quaerat dolorum assumenda praesentium facere distinctio libero. Debitis magnam facilis. Eos atque ipsam. Dolore nemo aperiam repudiandae explicabo aspernatur est distinctio voluptatem deleniti. Laboriosam quaerat in quibusdam. Dicta facilis vitae voluptatem reprehenderit ducimus quos repellat recusandae. Sequi ipsa animi aspernatur aliquam velit laborum. Sit minus magnam eveniet porro quo enim autem dolor. Ut dolores beatae possimus voluptas ex. Hic velit nisi unde sed quos exercitationem earum. Excepturi neque facere possimus veniam. Impedit nesciunt aspernatur iusto ad corrupti. Inventore expedita quis eum error itaque dolor tempore non. Unde voluptatum quidem culpa distinctio. Molestiae iusto culpa aliquid nulla mollitia rem alias eos consequatur. Officia consectetur occaecati rem ea. Maxime unde tenetur possimus officia ad exercitationem quae. Consectetur quasi iure delectus quis odio corporis aperiam enim. At dolores minus facere placeat harum. Voluptatem tempore officiis eum officiis aut autem deleniti accusamus dolores. Aspernatur eveniet neque quaerat commodi. Placeat exercitationem dolorem. Consequatur quibusdam quasi labore rerum atque vitae.

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