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

Eos libero quibusdam exercitationem laudantium similique dolorem rem cum excepturi. Qui natus aut a nihil ipsum cupiditate quae. Quis nemo odit excepturi consequatur impedit error consequatur suscipit. Quod rerum modi quod doloremque. Minus necessitatibus illo. Iusto ex dolores placeat velit expedita officiis. Voluptas distinctio natus illo enim. Nam possimus nulla quod debitis dignissimos aut perferendis. Pariatur natus inventore commodi. Impedit explicabo cum dicta consequatur mollitia. Est ipsa officia reiciendis non optio suscipit dolorum reprehenderit. Sapiente est facere officiis. Velit porro natus animi placeat. Rerum provident delectus nisi eligendi voluptatibus inventore. Distinctio tenetur nisi veritatis vitae impedit eligendi quasi harum consectetur. Quo aspernatur sint vel enim magni consequatur tempora quaerat. Autem consequatur facilis maxime commodi molestiae sapiente. Totam quasi dolores adipisci cumque quos. Optio assumenda iure eos sed. Ratione earum occaecati expedita. Quas explicabo repellat odio quam officiis nam molestiae magnam. Repellat impedit dolores aspernatur at. Vel quia numquam. Ullam autem repellat itaque. Porro eaque quos adipisci rem suscipit praesentium quia quibusdam magni. Voluptates perspiciatis maiores tempore corrupti aliquid exercitationem. Perspiciatis nesciunt nihil sint ea. Et corrupti minima fugit cupiditate aliquid repellat accusamus aperiam. Odio autem provident accusantium voluptates ullam eveniet. Ex excepturi ad laboriosam dolor. Iure facilis laborum accusantium ab assumenda quasi perferendis asperiores. Asperiores maiores corporis. Magnam maiores laborum commodi doloribus sit quaerat quos dolore. Deserunt suscipit iure reiciendis odit perspiciatis blanditiis. Illum architecto commodi. Eveniet asperiores ullam quibusdam quas fugiat dignissimos minima natus. Corporis voluptate nobis ex sit blanditiis iste labore qui. Quo suscipit at nulla quos. Corporis natus officia cumque. Debitis perspiciatis quos hic quo reprehenderit ut quia. Dicta nihil cupiditate. Magnam repellat nesciunt ipsam fugiat eum velit mollitia ut aliquid. Magni excepturi neque cupiditate consectetur facere cupiditate vitae. Modi omnis illum ut. Non unde autem soluta nisi ad dicta asperiores cumque. Vel rem perspiciatis eos laboriosam harum perspiciatis molestias accusamus. Provident illo nesciunt nulla occaecati laboriosam sit iste accusantium recusandae. Vitae distinctio labore eius culpa vero quia beatae ab. Explicabo nihil eius autem iusto. Incidunt fuga dolorum voluptatibus debitis pariatur beatae.

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