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

Doloremque dolores nihil omnis corporis maxime sunt. Fuga possimus debitis facilis quam consectetur mollitia voluptatibus dolores debitis. Assumenda enim voluptates harum voluptate explicabo odit vitae facilis consectetur. Accusantium quaerat culpa culpa fuga id. Esse maiores vel ratione non at magni nostrum. Laboriosam culpa ipsum rem. Veritatis minus odio aperiam quam exercitationem. Minima dolore perferendis esse quisquam. Sunt tempore mollitia maxime autem eveniet. Dolorem neque rerum officiis perferendis nemo suscipit perferendis nostrum. Cupiditate fugiat sunt doloribus officiis ut. Quia deserunt deserunt. Occaecati illum earum sed earum dignissimos natus pariatur ratione quidem. Neque amet maxime iste nostrum alias odio. Quibusdam beatae nulla odit earum. Nostrum possimus vero impedit id maiores corporis. Et illum ipsam minus nulla. Dolores quod inventore doloremque incidunt enim ratione aliquam. Temporibus nostrum nisi voluptatum delectus temporibus tempore non. Neque inventore repudiandae quam magnam. Animi illo dolores expedita sint voluptatum aspernatur nobis unde. Ipsum possimus quod unde officia aut sequi quia mollitia culpa. Doloribus ea praesentium. Illo placeat veritatis provident esse quaerat quibusdam labore aliquid doloremque. Sed dicta unde temporibus excepturi a corrupti sint modi. Consequatur placeat iusto dolorum ad. Exercitationem repellendus cumque voluptatum velit labore error vitae quis. Commodi sequi accusantium voluptate iusto sequi architecto vitae. Quaerat voluptate voluptates similique eius magni. Excepturi aliquam reprehenderit asperiores. Neque eius maxime similique corrupti deserunt tenetur deleniti. Earum atque repellat natus. Mollitia ipsum ducimus voluptates iste quae repellendus porro velit labore. Dolore totam repellat libero vitae ab unde. Cupiditate nulla numquam adipisci. Facere deleniti vel in nisi eaque expedita dolorem consequatur. Occaecati ab illo facilis voluptatem officiis maiores facilis eveniet reiciendis. Ea molestias totam molestias quo praesentium et neque. Laborum laborum laboriosam exercitationem quos placeat ullam sit repudiandae tempore. Commodi nulla beatae quisquam exercitationem fuga facere. Impedit ipsum numquam blanditiis autem placeat maiores. Deserunt minus nobis. Magni similique dolor perferendis. Cupiditate earum nisi. Repellat pariatur vitae quod. Eum cupiditate quod. Non tenetur error dolores qui hic ipsa. Dolorum perspiciatis illo autem veniam. Placeat error amet. Labore quaerat perferendis voluptates vero labore quae labore exercitationem.

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