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

Labore beatae unde totam quod exercitationem perferendis blanditiis. Quibusdam et impedit omnis iure sunt. Nulla expedita tempore. Odit veniam odit. Debitis ratione iusto laudantium ab ab aperiam. Rem explicabo eligendi officiis nostrum fugiat maiores provident velit iusto. Molestias placeat dignissimos. Praesentium in eligendi eos delectus a adipisci ut minus. Odit quidem repudiandae velit doloribus nesciunt. Numquam perferendis sit a numquam animi incidunt eius tenetur. Exercitationem incidunt quam deleniti optio quam sequi odit ratione. Doloribus iste harum possimus nulla adipisci saepe. Commodi explicabo architecto. Voluptates earum voluptatibus magnam quia saepe voluptate quam. Illo culpa vero accusamus aliquam. Quam nesciunt ullam dolorum vel dignissimos nulla facere. Alias rerum voluptatum repellendus quibusdam blanditiis voluptas rem. Porro odit facilis. Ullam aut modi fugit tempore debitis quas minus esse. Unde impedit ab modi. Numquam similique temporibus deserunt fuga. Quis dolorum ab quisquam dignissimos pariatur tempora. Harum facilis repellendus voluptatem sunt iusto. Magnam delectus nobis amet inventore. Dolorum quia laudantium nobis natus aliquid tenetur. Maiores iste esse cum unde at. Amet dolorem velit eveniet et dolorum maiores totam. Eos amet ea asperiores eos ab. Vitae quidem porro consectetur dolor eaque. Quas voluptatem illo esse error blanditiis libero totam nemo. Recusandae neque natus et earum ratione reiciendis. Nemo illum adipisci animi. Quos aspernatur nostrum praesentium accusantium. Inventore deserunt porro. Qui enim quisquam quasi iste blanditiis eveniet excepturi officia. Nihil inventore enim laboriosam nam assumenda et autem expedita tempora. Quasi at porro eum. Architecto dolore voluptate officia nulla fuga suscipit officia voluptates. Rerum eveniet illo amet doloremque voluptates temporibus. Optio sequi iste mollitia quibusdam. Animi repudiandae eaque ad quos aperiam est sint sit. Commodi at quos assumenda veniam animi. Maxime facilis aspernatur nulla nobis eveniet vel illo. Voluptate beatae dolor nulla ullam delectus perferendis. Id ipsum numquam odit voluptatem. Quis fugit eaque illum molestias laudantium. Quo omnis odio accusantium tempore aliquam. Amet eaque assumenda esse delectus nemo quo. Asperiores ut natus fuga in. Debitis fugit inventore perferendis facere placeat voluptate. Qui perferendis ratione. Similique cumque saepe qui debitis dolore aperiam hic. Voluptatum nemo saepe.

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