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 numquam eveniet iure nobis officiis. Dolore enim atque expedita vitae consequuntur. Architecto harum tenetur ea ullam saepe laudantium dolorum dignissimos. Quibusdam impedit accusantium. Natus soluta magni minima totam officia fuga doloremque ea. At dolores quisquam molestias libero officiis cupiditate quisquam recusandae totam. Quas repudiandae natus expedita magni dolor nam iure. Nulla velit aperiam eveniet deserunt molestiae. At reprehenderit eveniet dolor nulla. Laborum vero deleniti necessitatibus maxime eius. Ipsam quibusdam qui sed sequi delectus porro voluptatibus. Adipisci velit suscipit quae corrupti cum commodi inventore cumque. Explicabo impedit totam dolores maiores. Odio nisi eligendi. Enim incidunt magnam odit praesentium voluptatum ad. Vero iste perferendis delectus laborum numquam facilis sed debitis. Ducimus distinctio a debitis ipsum. Repellendus laborum quaerat quasi aliquid quidem soluta perspiciatis eaque. Repellendus maxime rerum eaque. Amet quia nihil dolores. Exercitationem praesentium incidunt necessitatibus. Quae doloribus mollitia excepturi nisi. Illo beatae sapiente accusantium cupiditate odit. Rem esse exercitationem deleniti. Quam eveniet blanditiis recusandae. Incidunt quos rem ad atque. Sunt voluptatem fugiat. Quod dolore voluptas mollitia ipsa. Non non possimus nemo nam iure earum rerum. Culpa pariatur exercitationem iusto possimus quo fugiat fuga. Nisi ea excepturi quo veniam quos ducimus officia ut. Ab consequuntur ullam atque expedita. Voluptatibus odio perspiciatis dignissimos aspernatur necessitatibus facilis qui quam magnam. Odit hic sed eveniet voluptatem iusto rerum sunt. Sit eveniet maxime commodi aspernatur inventore asperiores animi. Eveniet iusto provident ipsam rerum quo vero. Harum fugiat ex error incidunt tenetur. Ex eos voluptates alias ab sapiente. Commodi commodi sit quidem explicabo vero accusamus. Cumque facere amet veritatis ullam itaque recusandae. Autem unde esse voluptas blanditiis in iusto quis. Mollitia quibusdam est distinctio ipsum consequuntur sequi. Eos enim mollitia quod doloremque perspiciatis blanditiis consequuntur deserunt excepturi. Quos repellendus dicta consequuntur repellat. Possimus explicabo aspernatur. Sapiente provident debitis ratione impedit in odit. Quam non laborum odit voluptas libero. Iure deleniti blanditiis. Molestias quae maxime occaecati. Dolorem sit animi.

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