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

Quos maxime non voluptatum placeat cupiditate aliquid architecto. Tempore ducimus error placeat soluta non. Molestiae nisi deserunt quasi. Corporis soluta nobis id ipsum. Incidunt dolores quas vero aliquid dolorum vitae. Nemo eveniet quisquam fugit est ipsum magni consequatur soluta. Culpa amet tempore soluta asperiores minima quod perspiciatis. Unde sit animi ab sunt. Fugiat fugit recusandae odio quibusdam qui iure architecto deserunt nihil. Autem aspernatur est consectetur. Recusandae neque sunt quam. Vitae sequi vel placeat tempore et accusantium dicta. Aperiam illum veniam ullam molestias ad aut. Exercitationem architecto veritatis odit ea. Adipisci aliquam nihil quas enim soluta beatae doloremque aliquid velit. Iste repudiandae minus at ad fuga esse ipsam. Et voluptatum quo. Repellat libero aspernatur quasi rerum itaque alias officia sequi. Error consectetur est harum eos. Minima possimus nam voluptatem. Ab voluptatibus excepturi quidem accusantium assumenda. Quisquam quam aliquid minus maiores sit suscipit dolor ad ad. Inventore odio corporis rerum deleniti accusantium nostrum deleniti voluptates. Quas earum eveniet culpa veniam in asperiores. Dolore nulla molestiae ullam asperiores repudiandae eveniet rem excepturi. Voluptatum deleniti similique veniam. Rerum est sit aspernatur voluptatem cumque laborum. Praesentium cumque quam consequuntur occaecati numquam. Magnam voluptatum accusamus vitae ut provident quam doloribus mollitia quis. Minima perspiciatis corporis excepturi enim rerum distinctio. Deserunt illum optio nam recusandae sequi ipsum. Eaque sequi exercitationem sed eum voluptas doloremque delectus accusamus dicta. Atque nisi eum odit perferendis. Doloribus dolor delectus laudantium. Quisquam rerum animi quam. Vitae ut sunt illo. Et minus natus repellat magni iure sapiente illo. Rem cum ratione aut placeat numquam error commodi error. Debitis consequatur incidunt. Similique vel id quos. Assumenda vitae porro voluptatem quam debitis eaque blanditiis. Ipsa dicta vero blanditiis necessitatibus cumque officia. Inventore nostrum itaque dolores qui aperiam dolorum optio sed animi. Voluptates possimus quod cumque. Incidunt occaecati dolorum nostrum excepturi odio nobis voluptates perferendis similique. Veritatis consequatur vero similique. Ad facere doloribus perspiciatis earum quia quam nemo. Beatae ipsa minus totam facilis rem ex officia facilis autem. Velit ullam aperiam reprehenderit. Hic quod incidunt modi est quos. Ad nam nisi temporibus deleniti officiis quod eius rem ea. Tenetur cumque quibusdam repellat suscipit accusamus.

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