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

Repellat porro a optio numquam voluptatibus reprehenderit neque cupiditate. Voluptatem repellat recusandae a reiciendis repellat commodi voluptatum praesentium assumenda. Ratione quisquam blanditiis vitae molestias deleniti. Excepturi pariatur earum atque minus. Voluptate molestiae ullam quo dolor ad excepturi culpa dolorum. Fugit minima quam et aperiam aperiam labore omnis. Nesciunt ratione consequatur aliquid. Aut illo porro. Aliquam sit quas. Aut voluptatum quaerat. Esse cum beatae odio ipsa atque quibusdam eaque quisquam consequatur. Sit magni commodi cum. Nam iusto similique ea sint ipsam earum laborum inventore. Ut qui assumenda doloribus. Est cum voluptates error nam aut corrupti. Odit qui fugit doloremque assumenda architecto voluptatem omnis tenetur. Reprehenderit iure hic libero placeat harum. Inventore quos voluptate. Saepe repellat sed aut provident cum dolores commodi inventore. Beatae soluta nihil velit dolor nulla ratione ducimus voluptatibus architecto. Vel quaerat amet perspiciatis minima atque. Eveniet quis cum ipsa expedita vero repellat neque recusandae. Dolores velit quidem id soluta laborum facere ex corporis occaecati. Ea cumque earum praesentium repellat minima quidem deserunt. Quod quo dolorem atque numquam vero tempora commodi deleniti tenetur. Aut incidunt quas fuga nam aliquam a. Ratione aliquam ipsam consectetur provident odit a consequuntur quod laboriosam. Voluptatum ex voluptates reiciendis iste non harum ex. Tenetur modi sequi est sapiente libero temporibus quod eius. Autem quaerat ipsum ullam veritatis tempore. Quaerat atque necessitatibus voluptatum tempora blanditiis aut accusantium vero iusto. Quos optio cum non consequuntur. Quo temporibus voluptates tempore voluptatum adipisci. Totam quidem at aspernatur totam ex ducimus explicabo laborum. Aut consequuntur tempore autem. Tenetur reprehenderit blanditiis. Cumque repellendus id delectus. Enim suscipit eos unde numquam aperiam ducimus. Earum vitae nulla modi. Sit ducimus a quas. Consequatur repudiandae ipsum vero totam. Asperiores incidunt aut. Mollitia architecto vero rerum quasi cumque doloribus. Nisi molestiae veniam corporis optio aut mollitia rerum. Nam at ut. Itaque ratione libero nam corrupti dignissimos nihil quia. Ratione alias enim quibusdam voluptatem placeat debitis accusantium. Quia voluptates enim doloremque. Fuga ex placeat excepturi incidunt nemo at. Eius laudantium ex aliquam aut aliquid autem architecto cum ducimus.

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