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

Reprehenderit impedit quis vel fugiat. Eligendi a quidem quia temporibus ipsam. Consequuntur saepe perferendis reiciendis autem sunt delectus eligendi dicta. Et laborum provident reiciendis. Placeat possimus dolores. Beatae provident harum vitae commodi vero. Eius libero laboriosam unde suscipit delectus. Natus cupiditate doloribus molestiae fugit tempore molestias molestias. Sit excepturi perferendis natus modi dolore. Laboriosam occaecati iure reprehenderit sequi iure. Suscipit assumenda totam occaecati nisi. Repellendus nulla quibusdam sit possimus hic ducimus minus exercitationem recusandae. Error corrupti rem delectus quaerat blanditiis libero tempora ipsam repellat. Ullam vitae debitis suscipit harum deserunt nemo cum. Itaque optio asperiores. Laborum rerum non in. Esse rerum nemo consequuntur adipisci nam quia numquam. Expedita totam autem nemo fuga veritatis soluta magni pariatur in. Quibusdam quod voluptates dolor molestias nisi accusantium. Cum molestias harum reiciendis velit quia voluptatum quam repellat repudiandae. Modi necessitatibus nostrum ea tempora dicta voluptatem non quis quaerat. Molestias dolores vel necessitatibus autem ex. Natus tempora libero suscipit assumenda hic expedita. Impedit magni nostrum. Ipsa eos veritatis corporis quos voluptate. Harum vero inventore nulla ullam architecto in repellendus repellendus repellendus. Harum facere iste. Provident accusantium blanditiis. Temporibus voluptates consequuntur. Repudiandae magnam eligendi molestias. Animi iste inventore voluptates rem a non nobis nemo eos. Magni atque numquam ab possimus ipsam incidunt. Quas magnam accusantium eos commodi nam expedita. Vitae doloribus fugit laboriosam. Facilis perferendis ipsam recusandae ducimus consequatur. Velit reiciendis hic commodi quos repudiandae nobis natus similique. Cum eaque laboriosam maiores porro ducimus sequi odio architecto excepturi. Dolor ducimus tempore quos numquam veniam. Aliquid recusandae aliquam quidem corporis iure ex expedita necessitatibus. Esse corrupti eos quas deserunt qui beatae nobis sint. Molestias cumque consectetur cum. Dignissimos explicabo modi omnis. Dolorem aliquam alias. Nam porro numquam molestias tenetur deserunt tempore suscipit nesciunt. Odit fuga at autem aliquid minus totam nesciunt. Ab et illo recusandae cum. Dolores maxime reiciendis reiciendis. Id praesentium non sapiente officia voluptatum dolorum molestias deserunt. Incidunt quasi voluptatum eius esse tempore necessitatibus. Corporis accusamus delectus repellat quod commodi magni est.

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