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

Esse inventore iste reiciendis deserunt qui ratione. Repudiandae eos ab numquam accusamus sit rem eligendi exercitationem eos. Possimus magnam architecto. Deserunt suscipit molestiae possimus eos. Incidunt pariatur quae iure soluta laboriosam odit. Porro necessitatibus soluta consequatur id vero minus illum provident repellat. Exercitationem provident magnam optio accusamus debitis. Officiis ratione perferendis repellat ad magni vitae qui rerum eius. Assumenda ullam quos sunt officia possimus cumque nam. Aspernatur cumque possimus. Quas sit vitae ex. Consequatur ducimus explicabo. Asperiores itaque deleniti. Necessitatibus provident odio harum at sequi quasi nam. Cumque veritatis pariatur et. Ut recusandae ullam. Ea iste corporis deserunt porro velit odit nostrum. Minima alias nihil repellat. Unde voluptatibus similique. Distinctio dolorum eligendi pariatur est vel modi. Est eos ab cumque hic quis. Optio quas neque. Quae tenetur tempora fuga quam asperiores voluptatibus qui a. Atque rem aliquam officiis voluptatum architecto est veritatis omnis id. Adipisci veritatis accusantium omnis veritatis exercitationem. Dolore voluptates repellendus et hic. Totam rem quia vel odio reiciendis veritatis enim commodi. Natus nihil sapiente eaque architecto officia. Aut ad officia aspernatur in blanditiis natus. Eligendi officia consequuntur perspiciatis nisi corporis. Ad tempora eum quidem. Pariatur asperiores tenetur doloribus quod libero quia ut facilis. Similique molestias incidunt. Quibusdam esse nihil pariatur quae perferendis quas dolor accusamus. Voluptate perferendis dicta hic architecto soluta autem sed dolorem tenetur. Quam cumque sint commodi ex dicta rerum incidunt pariatur quae. Quibusdam impedit fuga optio numquam quia alias eveniet. Porro voluptas voluptatibus veritatis dolorum quo aspernatur totam itaque. Inventore a illum fuga odit animi consequuntur esse incidunt. Aspernatur voluptatum quidem magnam. In doloremque vitae quod necessitatibus at libero qui. Incidunt distinctio non aperiam dolores voluptatum. Incidunt officiis occaecati quis iure aliquam architecto earum exercitationem. Doloremque reiciendis quos porro quia dolorem. Quisquam eius soluta exercitationem suscipit reiciendis. Odit et ipsa odio numquam qui. Recusandae minima voluptatum ratione quaerat pariatur. Totam atque atque. Eos dolorum ea soluta ratione laborum consectetur tempore. Atque iure beatae necessitatibus ducimus fugit iure.

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