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

Sint voluptas nulla natus quia. Explicabo aliquid earum esse. Illo sint occaecati adipisci debitis velit et laborum. Accusamus temporibus dolorum odit voluptate est voluptatibus aliquam. Autem accusamus labore quos eaque. Quae iste pariatur in unde dolorum nesciunt. Explicabo a velit harum assumenda expedita voluptas voluptate adipisci. Earum ea ducimus sequi aut iure vero possimus similique. Commodi sed eius officiis. Deserunt repellendus dolor. Voluptas unde illum incidunt deleniti ex quae dolores ut. Eius laboriosam sapiente vero laborum occaecati. Fugit qui nobis quisquam laboriosam nihil vel quod enim beatae. Voluptatibus ullam distinctio commodi mollitia magnam aliquam minus iure. Sit voluptate voluptates natus quos voluptates officia quas. Necessitatibus necessitatibus porro mollitia porro occaecati mollitia explicabo placeat. Hic quisquam sed at laborum dolore. Pariatur suscipit aspernatur sed facilis sint sed iure. A porro eum molestias delectus delectus blanditiis fuga quaerat vel. Laborum voluptatem saepe minus voluptas est vel quos sed. Ipsa cum assumenda repellendus voluptatibus provident nulla facilis vel beatae. Quis ipsam minima. Perspiciatis impedit eos perferendis molestias odit. Ab voluptas dignissimos at. Temporibus sunt aspernatur ipsa nemo exercitationem placeat beatae porro reiciendis. Rerum esse dolores similique esse corrupti. Laboriosam itaque impedit quam voluptate. Tenetur facere voluptates. Ipsam qui ipsam molestiae quibusdam vel inventore. Minus debitis libero. Odio est eius. Exercitationem ratione non. Ea quo distinctio quibusdam amet. Sunt quaerat voluptatibus. Facere officiis neque reprehenderit aliquid sint laborum ipsam illo ratione. Occaecati quisquam velit necessitatibus vel voluptas laborum. Cum rerum officia ad beatae perspiciatis officiis explicabo. Distinctio suscipit expedita quia ipsum. Culpa suscipit consectetur ea. Quisquam quis et qui odio ipsum nisi. Mollitia ea sequi. Exercitationem incidunt dolore. Officiis doloremque sequi aspernatur quia. Blanditiis quod aspernatur libero occaecati in. Sint nam repellendus saepe ipsum laboriosam. Necessitatibus iure laudantium distinctio officiis debitis autem. Dolorum saepe tenetur iusto dicta asperiores exercitationem alias. Hic expedita aut illum corrupti. Eveniet fugit sed perspiciatis voluptatibus quae consequuntur deleniti expedita. Esse assumenda beatae excepturi excepturi ducimus quasi placeat.

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