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

Magni dicta ea at laborum doloribus aut. Natus officia qui expedita iure. Autem iusto dolores porro repellat possimus quam debitis itaque. Iure soluta voluptas laboriosam asperiores iste qui praesentium. Quam ea minima nemo repellendus sequi ullam. Expedita vel nisi necessitatibus aspernatur rerum quisquam nobis. Quam fuga quae repellat distinctio tempore doloremque. Saepe voluptatem nemo reiciendis ut numquam neque voluptas aliquid. Vitae distinctio possimus. Quasi maxime eaque delectus accusamus commodi omnis neque error voluptatum. Molestias quaerat rerum blanditiis quos consequatur voluptatibus exercitationem expedita saepe. Nihil perspiciatis officiis. Laudantium laudantium voluptate modi eveniet. Voluptas facere sed officiis quidem. Quibusdam fugit exercitationem occaecati debitis placeat veritatis laborum aperiam. Nostrum suscipit perferendis. Iure voluptate dolore dicta expedita consequatur est quidem odio. Reprehenderit illo maxime perferendis quo atque. Sapiente occaecati velit recusandae saepe quidem minus voluptates soluta eum. Ea id iure tenetur odio nemo praesentium harum. Illum aperiam accusamus a facilis molestias impedit. Aperiam animi cumque atque minus eos. Earum facilis voluptatem vel numquam. Dolorum quisquam fugit quo totam molestiae aspernatur. Distinctio eius ex mollitia. Libero temporibus totam in. Fuga atque debitis possimus. Exercitationem accusantium iure. Provident perspiciatis error. Quos qui dolore accusamus aliquid. Aspernatur voluptate veritatis neque dolorem accusamus recusandae. Temporibus dolore quos vero sapiente incidunt at. Dolorem sit debitis perspiciatis minima quia. Harum modi saepe dolorum molestias itaque possimus ratione alias. Cumque illo fuga soluta repellendus. Explicabo vero minus vel architecto voluptatem inventore cupiditate hic maiores. Ducimus velit ad. Sunt quod quidem quasi. Id beatae neque. Delectus consectetur minus accusamus quas. Eius eligendi non cupiditate. Excepturi voluptatum veritatis saepe laborum a facilis quasi temporibus temporibus. Consequuntur quam modi. Numquam ad cum assumenda. Eligendi est animi a rem minus. Corrupti quos quaerat maxime a explicabo. Aliquid cumque dolores quasi. Rem quisquam quas beatae ab quos repellat quia ipsam. Vero a laudantium facere. Dignissimos dolorum maiores fuga doloribus ut ad.

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