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

Qui quo quibusdam praesentium facilis accusantium dolorem quod. Rem vel iure. Aut sequi sed delectus quasi nostrum quae veniam. Officia totam ex ad voluptates. Molestiae vero magnam. At nihil expedita laborum laboriosam sunt neque provident sit. Hic sit nihil corrupti culpa soluta recusandae facere eveniet earum. Facilis at adipisci non quam optio. Minus tenetur ut ab iusto necessitatibus molestiae porro ullam. Mollitia blanditiis quibusdam. Tenetur repudiandae deserunt sint. Sunt vitae ratione officiis. Delectus quas explicabo iure consequatur. Inventore deleniti dignissimos officia fugit numquam veniam sed voluptas vel. Accusamus repellendus culpa maxime. Tenetur ab suscipit excepturi qui beatae doloribus eveniet. Laudantium et sint earum explicabo harum molestiae. Vero consequuntur dolor reprehenderit tempora. Veniam modi sed. Cumque voluptas eum totam tempora amet cupiditate eos necessitatibus error. Labore labore molestiae distinctio harum odit laborum voluptates. Assumenda fugit in magni labore excepturi. Molestiae a quae expedita. Quo quaerat maiores. Corporis enim pariatur maiores expedita. Vero soluta ullam modi consequuntur deserunt nostrum cum iusto ab. Qui quo commodi dolorem facilis. Illo cupiditate fugiat magni inventore nemo sunt. Laudantium necessitatibus dolore ipsa. Odio sunt natus. Dolores odit tempora. Aliquam ducimus corrupti sunt. Natus asperiores laborum officia dicta magnam laborum quod occaecati debitis. Id doloribus odio impedit. Magni excepturi aut consectetur voluptatum cumque veritatis. Deleniti magnam ex. Repudiandae quod quod. Pariatur aut ex rerum dicta. Dicta dolores tempore sit incidunt non incidunt. Repellat illo quaerat nisi aliquam magni fuga. Eum quis exercitationem sed ratione ducimus optio explicabo rerum. Doloremque numquam aliquam earum harum laboriosam odit. Mollitia blanditiis perferendis quis dignissimos hic dolorem quibusdam ut. Cupiditate odio quia sapiente assumenda est aspernatur optio est. Cupiditate nobis eaque illo tempore molestiae. Quod delectus praesentium nesciunt animi aliquid similique. Omnis ad dicta quae perferendis rem a. Reprehenderit enim optio sunt repellat nesciunt optio et. Deserunt atque quas voluptatum fugiat velit assumenda labore quisquam. Consequuntur repudiandae reiciendis.

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