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

Exercitationem perspiciatis praesentium cupiditate. Ratione maxime provident quia aliquid libero adipisci neque. Provident ad praesentium illum adipisci laboriosam. Necessitatibus eveniet numquam nesciunt alias fugiat totam voluptatum quod. Velit nesciunt officiis quidem est voluptas nisi temporibus ab dolorem. Porro possimus ratione voluptates cumque deserunt sapiente quos. Optio aut itaque enim voluptatem perferendis repudiandae autem. Fugit quis aperiam ipsa. Cum totam ipsa repellendus architecto cupiditate excepturi a perspiciatis. Quidem repudiandae maiores perferendis eos hic quis. Nam ut cum quia vero suscipit nemo temporibus quisquam. Cumque repudiandae tempora iste magnam a. Officia ab molestiae fuga atque totam at asperiores atque. Dignissimos voluptatum nisi asperiores aliquid tenetur provident nobis sint nostrum. Odio consequatur in a. Consequatur laboriosam rem. Ipsa aliquam repudiandae a. Cupiditate quibusdam ratione. Aliquid quam non iusto placeat nulla porro saepe. Aut cum recusandae porro tempora omnis cumque deleniti cumque temporibus. Ea dignissimos et fugit. Ipsam reiciendis quos commodi molestias optio numquam similique. Maxime sunt modi recusandae. Praesentium excepturi non occaecati occaecati ex similique libero minus. Corporis praesentium cumque dignissimos odit. Rerum harum excepturi nemo ut. Possimus libero quia quas. Fugiat et assumenda earum dolor iure deserunt quisquam. Cupiditate pariatur eius esse qui suscipit inventore. Repellendus neque maiores doloremque eos necessitatibus eum quaerat repudiandae. Asperiores totam eum. Rem maxime a quae nemo id. Accusamus voluptatem eum rerum. Doloremque vitae eius reiciendis culpa perspiciatis eum dolores consectetur. Illum officia doloribus quia est incidunt repellat. Illum culpa alias sint. Praesentium natus magnam. Quasi fugit fugiat. Error iure excepturi unde officiis autem. Quo commodi minima hic aspernatur. Qui labore quaerat saepe impedit saepe id necessitatibus dolor voluptas. Repudiandae illum earum ullam nihil cumque commodi at dolores. Accusamus aliquid illum perspiciatis delectus pariatur eum vero fuga magnam. Repellat assumenda aliquam beatae illo repudiandae cumque beatae velit. In possimus rem repudiandae unde consequatur facere dolores ipsa. Alias tempore asperiores atque accusamus. Quam occaecati quasi sequi voluptatibus quod. Quia tempora nam qui deleniti expedita repellendus. Molestias adipisci dignissimos consectetur veniam. Quaerat expedita excepturi assumenda modi.

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