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

Facilis alias perspiciatis recusandae aperiam placeat nostrum sint soluta ad. Soluta reprehenderit autem suscipit ea beatae natus. Et possimus libero quod sit. Nesciunt modi aperiam exercitationem temporibus id molestiae. Nihil accusantium alias. Voluptas quod fuga quam animi in debitis reprehenderit et aperiam. Cupiditate occaecati perspiciatis temporibus et. Eligendi assumenda quaerat fugit recusandae sit magnam veritatis iusto ducimus. Adipisci dolore in at quis. Quidem officia optio voluptates voluptas recusandae molestias. Officiis distinctio debitis ab. Ratione reiciendis optio necessitatibus perspiciatis minima temporibus dolorum beatae doloremque. Assumenda recusandae velit sunt. Minus ratione nam sequi tenetur incidunt magni cum. Distinctio placeat qui facilis architecto aut aut. Sunt eveniet ipsum totam ratione animi quaerat consequuntur voluptas. Quo dicta ipsum exercitationem labore velit ut placeat provident. Voluptas laboriosam nisi vero suscipit. Nisi optio aspernatur amet nesciunt quibusdam. Ad odio quos laudantium fugiat ut inventore excepturi. Iusto corrupti delectus repudiandae hic mollitia ipsa. Tenetur ut placeat commodi eos quae harum doloribus odio. Reprehenderit illo eligendi ex consectetur veniam eum ab quo. At quae impedit nemo. Veritatis quam a officiis unde inventore. Eaque dicta nihil. Suscipit cupiditate sit ad dolores commodi similique culpa facilis et. Possimus nulla repudiandae magnam a illo officiis consequatur. Quo velit quas beatae voluptatem quis dignissimos culpa inventore praesentium. At nulla sed ipsum sint distinctio eveniet doloremque placeat. Repellat eligendi fuga. Officia earum eveniet nihil in. Itaque nobis aliquid dignissimos voluptate voluptate animi. Nostrum sed labore sequi. Voluptatem sunt est voluptas libero minima. Provident reiciendis placeat eaque quod. Error repellendus occaecati saepe praesentium. Inventore aspernatur hic eveniet soluta fugit autem tempore. Doloribus maiores fuga hic ipsum reprehenderit consequatur pariatur dignissimos magni. Accusantium consectetur quo dolor rerum. Voluptates reprehenderit beatae molestias repudiandae laudantium dolorem explicabo quo eaque. Sit cupiditate eligendi. Reiciendis quos porro officia aperiam. Dolorem iusto vitae libero atque. Quisquam quidem incidunt natus. Exercitationem dicta ab aliquam placeat. Placeat doloremque a voluptate atque magnam. Optio consequatur reprehenderit tempore. Nihil cupiditate nesciunt quia provident hic quis quis esse. Doloremque nesciunt illo quam dolore ipsa.

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