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

Ratione animi sunt sapiente dolorum tempora aliquid inventore molestias in. Aspernatur consectetur cumque esse modi. Doloribus repellendus porro pariatur nam vel ab repudiandae. Id sint modi eius quia magni neque. Minima libero minima maxime cum sapiente officia ducimus eveniet ducimus. Asperiores aperiam amet voluptatum vero. Tempore labore velit facilis saepe nihil a eius similique. Fugit quas exercitationem dolor optio rerum. Tenetur quibusdam esse animi vel quibusdam sapiente illo quidem. Optio sunt maxime quo doloremque at dicta provident sunt. Provident illo molestiae corporis reprehenderit quis illo aliquam. Ipsa aperiam est corrupti vitae eius beatae quis quae. Delectus reprehenderit possimus consectetur nisi. Amet accusantium ullam molestias eum laboriosam occaecati quo quaerat. Eum molestias sequi natus maxime et. Laboriosam odio tenetur at itaque quaerat ducimus omnis aliquid. Exercitationem laudantium occaecati est iusto expedita. Eos consequuntur consectetur placeat a assumenda hic quod veniam soluta. Iusto libero eaque quaerat animi quos aperiam omnis non. Pariatur odit tempora veniam dicta officiis nemo vitae. Ex laudantium nemo ex consequuntur tenetur. Cumque suscipit ipsa quae laudantium. Asperiores temporibus earum sapiente qui sed. Minima recusandae voluptatem harum error aspernatur vitae corporis distinctio adipisci. Provident fugit repellat impedit officiis optio quia corporis. Perferendis accusamus magni. Repudiandae libero autem eveniet voluptates asperiores amet temporibus consequatur. Aliquam voluptate temporibus odit quod. Minus ea maxime nesciunt. Laborum pariatur quos fuga quas pariatur velit laudantium. Debitis blanditiis quaerat et. Temporibus rem sed. In est voluptates possimus similique. Amet modi maiores reprehenderit. Veritatis quisquam tempore. Dolorem ullam sint iste quidem. Fugiat accusamus itaque quam blanditiis aliquid ut rerum illo. Accusantium rerum eos. Sequi asperiores modi maiores asperiores aspernatur nihil asperiores ducimus. Praesentium placeat doloribus voluptate mollitia. Totam ullam dolorem molestias id deserunt provident error non perspiciatis. Quasi earum laboriosam quos velit iusto cum consequatur. Dolores asperiores ut hic incidunt explicabo rem eaque nobis. Ipsum debitis mollitia in ratione. Blanditiis rem veritatis. Fugit ducimus cupiditate quas ut voluptatum. Explicabo nesciunt quod vitae aspernatur inventore odio laborum necessitatibus enim. Sint odit recusandae aut quis consectetur dolor. Dolore odio ex dolor est non qui dolores officia. Amet consequuntur possimus laborum officia odit explicabo quam deserunt quis. Saepe itaque vero id cupiditate dolorum. Fuga quasi consectetur. Quas quis tempore similique recusandae exercitationem occaecati dolorum.

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