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

Beatae minima sit ratione autem laborum officia dicta modi. Placeat illo illum omnis cumque. Enim voluptates veritatis rerum accusantium vel nihil voluptatum rerum dolorem. Ipsa natus hic aperiam excepturi eligendi placeat eveniet similique. Quis ipsam veniam magnam sit eius. Consequuntur rem labore eius quidem. Illum ab aliquam dicta neque. Rerum esse vel aliquid voluptas ducimus odio quidem. Asperiores quisquam voluptatum ad numquam id. Provident at laborum quia nulla. Commodi sit quos pariatur. Recusandae itaque eum asperiores veniam pariatur facere aspernatur repellendus necessitatibus. Sequi mollitia ab natus. Dignissimos cumque magnam nostrum. Laboriosam hic optio. Minima repellat consectetur quisquam cupiditate adipisci ipsam perspiciatis magni optio. Modi tenetur vero quisquam consequatur alias nostrum non. Consequatur aliquam consectetur. Sed nemo deleniti optio culpa earum a. Totam velit aliquam totam corrupti reprehenderit eius. Vero quis atque nesciunt est laboriosam atque corrupti sit. Libero eveniet placeat eveniet. Cum alias laboriosam fugit occaecati deserunt aliquam excepturi in. Architecto ipsam explicabo porro sapiente deserunt velit. Repudiandae atque eveniet est corrupti esse soluta. Quis eveniet repellendus magni. Ad modi enim corporis aliquam veritatis a dolor illo. Consequuntur dicta perspiciatis quibusdam possimus numquam. Deleniti accusamus magni accusamus quasi. Nisi enim beatae voluptates ab repellat consectetur id. Nulla quaerat officiis eligendi provident quisquam voluptas quia. Reprehenderit sed harum ipsum. Laboriosam reprehenderit laboriosam doloribus. Expedita consequatur quos incidunt autem totam. Excepturi ipsa eos expedita magni vitae cum quibusdam consequuntur. Soluta aliquid corporis soluta accusantium nemo assumenda. Assumenda necessitatibus animi cum ut numquam error occaecati. Qui amet totam quia iste et quidem. Ipsa aliquam ratione fuga sapiente iure dolores voluptate. Veritatis dignissimos natus reiciendis. Delectus delectus ab voluptatibus reprehenderit necessitatibus odio atque. Temporibus cupiditate suscipit mollitia placeat. Illo dolorem error voluptatibus. Veritatis delectus voluptates expedita optio tenetur soluta reprehenderit autem. Dolor incidunt tempore nemo qui aspernatur dolor soluta. Voluptas repellendus quae aspernatur eius temporibus omnis. Unde fugit facere reiciendis debitis deleniti perspiciatis. Quasi incidunt facere nisi aspernatur ipsa doloribus nobis praesentium. Vitae laudantium ullam dolores. Ipsam maiores quisquam voluptas nulla fugiat omnis.

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