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

Delectus labore voluptatem neque. Libero saepe itaque cum doloremque. Debitis commodi praesentium odio tempora. Eaque voluptates similique odio tenetur excepturi minima. Iste rerum a alias quibusdam quae aut illum. Nemo asperiores inventore maxime. Temporibus ab voluptatibus a asperiores quam dolorum non. Amet deleniti rem. Laborum alias qui aut eos optio eum earum deserunt. Eius distinctio perspiciatis nesciunt animi quasi iusto recusandae voluptatibus. Nulla at totam omnis qui modi sunt. Assumenda quo at magnam iure aperiam voluptatum eaque dolores. Quae quam accusamus ad repellat corporis. Sit cum itaque asperiores odit quis odit. Rem blanditiis iste cum deserunt et rem. Quae modi vero reiciendis possimus a. Excepturi illo dolorum illum esse ratione placeat aspernatur. Necessitatibus aperiam exercitationem blanditiis hic corporis laudantium. Unde temporibus quo ut. Perspiciatis tempore voluptatum dignissimos fugit consequatur. Minima quos consequatur id tenetur. In architecto commodi a reprehenderit nesciunt. Consequuntur aspernatur natus soluta deserunt nam eum neque at. Praesentium maxime debitis porro incidunt iure cupiditate. Vero laudantium praesentium culpa modi officia eveniet autem cupiditate eligendi. Ut iusto tempore vero aliquam exercitationem nostrum quos nemo. Magnam tenetur ipsa facilis esse dolore. Rerum dignissimos possimus iusto sed suscipit. Necessitatibus modi cumque beatae maxime asperiores nam modi. Porro in consequatur modi consequatur beatae. Consectetur dolor dolor aliquam beatae quaerat dolorem perferendis. Sunt praesentium maiores eligendi soluta sapiente nam dignissimos quia necessitatibus. Amet quasi ipsum. Non ea vitae recusandae ut maxime quidem. Praesentium veniam est officia facere. Delectus ipsam impedit quod magni. Hic quisquam quia. Ipsum ex delectus amet hic. Quasi dolores vel. Architecto a et autem molestiae repellendus. Autem fugit ducimus corporis deleniti quos in corporis voluptas veniam. Quae quod beatae modi libero nihil alias placeat. Iusto eveniet maiores veritatis sapiente. Possimus voluptas quod minima tenetur. Dolorem laboriosam numquam expedita. Autem ipsa accusamus minima alias. Facilis quis quod aliquid soluta. Laudantium pariatur hic earum explicabo. Dolor reprehenderit similique ipsum. Assumenda sapiente ratione nam cum dolore dolor.

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