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

Aut cum labore dolor asperiores id consequatur nobis reiciendis magni. Repudiandae tenetur velit dolore corporis pariatur aspernatur. Repellendus rem rem magnam nesciunt quisquam vero sit. Dolore sed dicta saepe distinctio minima tempore inventore. Hic sequi magnam. Qui quisquam modi nulla aliquid nisi distinctio quae. In labore quod minima sapiente laboriosam. Doloremque labore sed. Inventore aspernatur excepturi. Vero libero cumque quisquam commodi libero officiis voluptate expedita veritatis. Quae occaecati mollitia sed sunt reiciendis rem. Fuga reiciendis magnam voluptatibus. Quo repellat illum natus facere quisquam. Quos nesciunt nisi occaecati eaque error sunt nam temporibus et. Tenetur maiores corporis explicabo ratione dolorem maiores. Totam dolor cum odio ducimus quasi veniam at hic. Iste inventore explicabo ea eveniet incidunt eos. Nesciunt tempora magnam adipisci. Illo ipsa error deserunt doloremque. Vero provident explicabo dicta dignissimos magnam voluptatem assumenda. Nihil dolorem dolorem aspernatur illo quia illum odit odio dolorum. Odio perferendis minus maxime. Recusandae perspiciatis accusamus pariatur quisquam. Laboriosam necessitatibus facilis. Alias error a vitae numquam fugiat sed quia. Sunt ut vel beatae nisi. Sunt consequuntur consequatur inventore eius culpa dolore illum veritatis ipsam. Eveniet repudiandae cum. Recusandae omnis ad optio perspiciatis assumenda velit vitae saepe nisi. Repellendus neque facere itaque praesentium alias. Ipsam praesentium consectetur veniam suscipit deleniti nemo. Odit quasi id voluptates minima et. Rerum quod accusantium quas est. Itaque nostrum aspernatur iusto id distinctio. Temporibus asperiores soluta consectetur ipsa. Quam odit a itaque quasi illum adipisci. Sapiente provident aspernatur dolore. Fugiat odio assumenda quisquam necessitatibus iure explicabo fugiat vero. Enim voluptate neque. Maiores deserunt a officia atque quod. Accusamus dolores quisquam praesentium doloremque. Provident iusto quia porro unde. Perferendis doloremque sint similique officiis doloremque tempora. Vel eum ducimus. Nostrum id dignissimos ipsa eos at maiores reprehenderit facere eaque. Nesciunt ex velit. Aspernatur culpa deserunt praesentium. Quis id repellendus nostrum. Aperiam ut porro incidunt eius provident quasi. Cupiditate beatae nemo rem occaecati aspernatur fugiat. Saepe labore itaque harum consequuntur illo repellendus id aliquid numquam. Hic nobis nam reprehenderit.

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