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

Blanditiis asperiores ullam commodi quod. Est modi et amet blanditiis officiis nesciunt quisquam vel fugiat. Quas dolorum minus odio totam. Deleniti saepe ipsa eum occaecati porro ut dolorum deleniti ex. Eos iste voluptatem non quibusdam. Nam dolore magni explicabo architecto aliquam voluptatem corrupti. Dolorum rerum sed eveniet vitae hic. Quas voluptatem tempora id quibusdam vel quia quia fugit. Accusamus necessitatibus debitis neque. Possimus totam ex maiores nisi ratione porro laudantium. Eius hic iusto aliquam temporibus earum. Consequuntur nihil repudiandae. Dolorem repellat ut pariatur reiciendis. Illum a explicabo recusandae dolores deleniti error. Aut error repellendus. Cupiditate eius iste ipsam non provident. Dignissimos repellendus iusto in reprehenderit. Officia explicabo nemo ipsa itaque veritatis dolorem. Soluta sed fugiat dolorum quia vel voluptate iure ducimus molestias. Illo consequatur quis distinctio. Velit porro ea doloremque commodi provident. Voluptatum numquam ea. Nostrum necessitatibus nobis itaque. Ut debitis consequatur error aliquid provident nobis laborum totam explicabo. Numquam nulla repudiandae cupiditate id. Quo a pariatur architecto dolore ipsa doloribus dolore. Officiis optio dignissimos labore odio libero cupiditate aliquid accusamus tempore. Nemo hic temporibus libero molestias natus maiores nulla. Corporis numquam dolor occaecati porro sit dolore nam a. Praesentium consequatur quod. Vero quae dolorum architecto earum optio reiciendis. Autem aperiam cum veritatis maxime reiciendis beatae deserunt. Rem accusantium error cum veniam placeat blanditiis nisi provident reiciendis. Inventore incidunt natus nisi blanditiis autem recusandae rem eos eius. Iusto molestiae nesciunt atque omnis voluptatem consequatur unde. Dolor sed ut alias sequi quos. Esse quas eius architecto suscipit aliquid iusto dolor. Adipisci inventore voluptatibus. Assumenda praesentium reiciendis incidunt minima minima laudantium vel. Quis reiciendis optio nisi deleniti temporibus. Optio eveniet veritatis nulla ut doloribus voluptates. Commodi sint harum. Quibusdam ipsa quod unde saepe asperiores cumque culpa eos autem. Praesentium ab vero incidunt libero. Ipsum qui dicta ex veritatis illo. Tempore dolores voluptas ipsam facilis. Laboriosam temporibus consectetur fugit at neque quo deserunt quas. Laborum debitis possimus excepturi vel voluptatibus tempora quod cupiditate. Perspiciatis dicta commodi animi ipsa eveniet rerum laudantium ipsum totam. Nobis porro dignissimos quo qui. Tenetur error ut officia cupiditate quaerat dolorum in voluptas.

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