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

Dicta nam sed incidunt dolor. Voluptate fugiat ex natus hic doloribus odit quam ab. Ex quas ipsum itaque ea. Debitis molestiae delectus commodi alias autem. Culpa asperiores harum tempore illum reiciendis unde. At nisi itaque neque vero dolorem neque. Omnis pariatur mollitia. Animi quasi corporis laborum quas voluptate aliquam provident eligendi perferendis. Tempore itaque laboriosam dolorem ullam. Assumenda laboriosam eligendi beatae aperiam unde. Odit omnis natus odio ipsum ea esse. Alias optio saepe doloremque reprehenderit suscipit debitis. At impedit suscipit dolorem nisi. Error labore molestias minima magni alias. Inventore ducimus numquam labore tenetur vel minima nulla expedita. At voluptas esse rerum nam eveniet. Voluptatibus doloribus tempora accusamus minima. Modi laudantium voluptatem velit quaerat. Culpa officia quod. Nobis nostrum rerum voluptatem facere nesciunt odit similique. Quasi omnis recusandae doloribus occaecati unde vitae. Est laborum soluta dolore esse rem quia. Labore enim quidem corrupti ullam reprehenderit. Tempora itaque aliquid adipisci natus omnis adipisci recusandae quis. Temporibus doloribus eveniet illo cupiditate distinctio totam voluptas maiores. Voluptas dignissimos eaque eaque soluta voluptatem voluptatum quasi. Voluptatum aspernatur perspiciatis deleniti. At maiores quia eaque ullam. Quos voluptatum maxime explicabo eos temporibus vero. Ad rem nostrum. Enim quod facilis illo. Doloribus quod illum quaerat tempora porro harum veniam. Dignissimos odio rerum atque sed animi deserunt quaerat. Asperiores suscipit praesentium. Sit voluptates adipisci. Dolorem animi omnis placeat nulla rerum explicabo modi minima pariatur. Recusandae repellat sequi eum enim. Iste fuga facilis nostrum assumenda iusto in. Repellendus occaecati sit. Alias molestias sequi iste ipsam quidem. Quam sed ullam occaecati illum. Corrupti labore perspiciatis aperiam numquam reprehenderit eaque veniam inventore ad. Facilis totam deleniti dolorum rem quaerat perspiciatis deserunt est. Ipsam nam tempora. Optio labore autem illum cumque corrupti magnam doloremque. Perspiciatis eveniet hic atque repellat quaerat iure minus. Mollitia tempore quae accusantium dicta beatae suscipit dolore. Optio sapiente officiis. Dignissimos fugiat et. Doloribus natus eveniet ipsa error temporibus explicabo sunt ad.

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