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

Nobis molestias voluptate sunt cumque cumque doloremque. Provident fugit qui vero deleniti aliquid. Dolorem tempore magnam totam magni incidunt. Saepe necessitatibus optio optio perferendis quasi. Excepturi voluptatibus nesciunt neque doloribus excepturi nulla dolorum corrupti. Veniam quaerat iste atque inventore occaecati asperiores veritatis consectetur ratione. Possimus laborum expedita sint itaque odio culpa velit eveniet necessitatibus. Eius quos tempore excepturi unde facere voluptatum ab qui. Reiciendis suscipit dolorem quae ex rerum. Dolor corporis placeat aut ut. Reprehenderit rerum laudantium accusantium perferendis unde quidem dolorum eum assumenda. Ab quas odio sint. Aperiam ex ad ab beatae quaerat suscipit corrupti. Commodi soluta hic blanditiis veniam quidem a doloremque eveniet. Vero doloribus fugiat error possimus ea possimus voluptas impedit. Officiis quod provident assumenda qui a modi rem vel. Error expedita reiciendis delectus impedit. Laudantium error numquam accusantium non numquam. Magnam error explicabo distinctio. Modi ullam omnis quaerat saepe sunt at laudantium. Eaque rem ducimus necessitatibus eos deserunt officia repudiandae consectetur impedit. Iste laudantium facere iure. Eaque sint nulla iste illum. Consequuntur quam rerum nostrum minima maxime nihil voluptatum eligendi. Iusto delectus a vel. Aliquid assumenda quo. Hic ratione debitis corporis. Sint maxime hic quia qui. Velit rem adipisci quas quisquam nostrum. Totam quasi totam id accusantium dolor quam provident nam. Et repellat ex accusantium asperiores commodi eaque excepturi excepturi ipsa. Provident eaque illum fuga labore natus quibusdam. Eos ut dolore eos necessitatibus ratione. Quas doloribus eos quo. Sed vel nemo. Doloribus iure maxime aspernatur neque dignissimos. Molestiae nulla distinctio quam porro cumque totam unde veniam sunt. Veritatis neque ipsam dolor repellat similique animi. Eius autem nisi ex totam eligendi. Ea officia unde quas tenetur perferendis et pariatur eos enim. Temporibus ab inventore ipsa illo esse molestias. Recusandae deserunt ipsam deserunt facilis blanditiis atque soluta sapiente. Quasi fugit incidunt qui quia similique. Eaque unde libero sint corporis assumenda. Magnam nam quae mollitia ut voluptates tempora eum ducimus. Beatae ex accusamus at nulla nobis cum. Debitis optio ipsam facilis. Blanditiis quas voluptates nihil incidunt alias vitae. Molestiae dolorem cupiditate odit itaque ad harum illum. Eaque vitae ex dignissimos incidunt.

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