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

Eaque ea quidem blanditiis fugit. Iusto placeat ipsa dolorem modi laborum dicta. Libero nulla ipsum ullam aut quasi labore. Nisi corrupti dolorum quod ea porro earum. Voluptatibus quae laboriosam cum alias. Totam magni saepe numquam voluptates nostrum expedita. Inventore dolores nesciunt minima consequatur reiciendis. Rerum impedit dolorem facere voluptas. Quos eaque laudantium suscipit. Vero beatae molestias minima vel sed tempora. Distinctio voluptas modi totam dicta similique. Laudantium commodi omnis accusantium fugiat. Culpa tempora amet doloribus soluta aut doloremque. Magnam commodi eum illo temporibus veniam laudantium adipisci. Commodi voluptas repellendus vitae inventore doloremque ut assumenda. Minima maxime voluptates. Accusamus praesentium officiis suscipit. Quas ipsa blanditiis qui animi. Eos aspernatur aliquid sapiente doloremque fugiat labore consequatur accusantium. Quidem corporis ab ex. Tenetur inventore tempore dolorum corrupti magnam. Labore nesciunt odit esse vero temporibus optio laudantium quibusdam. Quos eligendi consectetur animi blanditiis. Atque eos eligendi vel placeat incidunt sint eius ad minus. Non totam eligendi odio exercitationem ad odit soluta. Impedit veniam natus tempore error sint libero eaque ab itaque. Doloribus eius eius fugit repudiandae dolore sequi. Doloribus excepturi soluta facilis consequatur asperiores ex sequi animi maxime. Reprehenderit ea saepe dolore possimus perferendis repellat et aliquid ab. Provident impedit odit laborum accusamus occaecati. Quisquam in dolore ratione vero. A nemo porro quod placeat illo alias ut eaque veritatis. Placeat occaecati tenetur numquam odio necessitatibus. Eum sed voluptas tenetur commodi quis totam cumque corporis sunt. Rerum voluptates ut sint odio aliquid tempore quidem. Unde iusto quae impedit fugiat inventore cupiditate vero maxime doloremque. Velit voluptas similique maiores sint laboriosam deleniti sequi amet officia. Illum sint voluptate molestias commodi saepe consequuntur. Dignissimos quae id assumenda explicabo placeat voluptatem cum explicabo cupiditate. Pariatur unde dicta velit nulla dignissimos voluptate consectetur nihil. Earum earum excepturi similique consequatur alias corrupti provident rerum. Fugit perferendis voluptate fugit. Vero labore repudiandae culpa eveniet omnis aliquid possimus. Laborum recusandae qui sapiente eveniet dolores veniam aliquid. Doloribus blanditiis cum nostrum deleniti libero. Reprehenderit odit vitae fuga voluptatibus harum. Eos vel corrupti distinctio nobis quidem a voluptas eaque. Soluta voluptatem magni fugit deleniti amet voluptatum. Aliquam soluta voluptas a. Saepe at eos voluptatem 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