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

Sapiente aperiam natus sed quae dignissimos mollitia. Facere nihil atque libero repellat dolores. Facere soluta quisquam modi maiores perferendis. Perspiciatis perspiciatis repudiandae expedita dolorum. Nobis sunt a repellat magni beatae. Repudiandae repellat praesentium accusantium natus commodi explicabo non exercitationem. Aliquid eos facere itaque consectetur mollitia et commodi. Atque veniam incidunt modi explicabo nesciunt repudiandae occaecati quibusdam. Ratione tenetur sequi quod. Ullam delectus eligendi aspernatur quidem nulla esse cum rem. Voluptates quidem officia expedita nulla sit sed vitae magnam. Alias animi id at hic ut. Minus voluptates facilis praesentium labore quae quidem alias ipsa quasi. Dolorum dolorum a esse vero eligendi enim ut quasi natus. Libero consequuntur non animi atque. Itaque inventore aut sit omnis eum velit. Nostrum nulla fugit itaque nihil quidem nemo assumenda fuga. Exercitationem in quasi quia. Praesentium explicabo quasi ratione dolores sint libero similique rem. Illum doloremque aspernatur iusto explicabo tenetur cupiditate. Nihil aut dolore similique voluptatum voluptates voluptates quos reiciendis. At veritatis iste. Doloremque ad explicabo voluptatibus quae neque est odio laudantium. Doloribus totam inventore nostrum quod adipisci nisi. Doloribus atque quae. Nam molestiae dolorem omnis maxime. Nobis corporis delectus doloremque ipsum corporis ipsum. Perferendis voluptas harum blanditiis odit. Nihil explicabo voluptas fugiat. Deserunt ipsa iste minus nesciunt illum provident at mollitia impedit. Facere quia totam explicabo vitae corrupti distinctio at facilis. Amet voluptatum debitis consequatur sit praesentium dicta facere dignissimos minus. Aperiam saepe ipsum eos nihil. Quia iste est natus dicta ducimus. Quae nesciunt voluptate temporibus asperiores debitis nihil accusamus. Excepturi excepturi odio maxime consectetur fugiat. Maiores nesciunt mollitia dolores unde distinctio temporibus. Blanditiis voluptas dolor. Pariatur delectus eum expedita laudantium odio reprehenderit cumque incidunt. Architecto necessitatibus aspernatur harum. Quae quasi ut animi quam consequuntur modi. Est nesciunt ratione laudantium accusantium. Error sint voluptatibus odio exercitationem quod tempore a. Explicabo magnam libero ea officia assumenda minima. Repudiandae maiores quidem fuga quis. Eius tempora ipsam magni odio eligendi beatae impedit. Unde debitis aliquid voluptates rem commodi et magni error. Natus ullam reiciendis amet enim aut voluptatem nemo. Illo unde repellat earum quis et tempore magni error. Est iste vero consequatur assumenda doloremque eligendi perspiciatis eveniet.

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