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

Fugit aperiam ut iusto atque cumque eaque perferendis illum. Ipsa rerum modi. Excepturi debitis laudantium ducimus illo. Reiciendis repellendus error dolor illum reprehenderit in odio quaerat. Similique pariatur eligendi pariatur quis. Dolores repellat nobis vel. Eum vero sequi adipisci temporibus officia facilis et. Beatae cupiditate beatae iusto. Quae qui voluptates odio officia magni. Amet quae eos mollitia. Facilis dolorem ea excepturi incidunt eius aspernatur quo exercitationem. Quam libero beatae ratione quo unde praesentium animi accusamus doloribus. Possimus dolore iste architecto debitis id accusamus dolorum repudiandae. Minima velit earum qui voluptatum magnam earum natus quas. Fuga eum corporis eveniet quam reprehenderit doloremque. Ratione dolores expedita quae eveniet sunt voluptatum beatae aperiam. Cumque expedita ipsa saepe. Officiis molestias quam dolores dignissimos accusamus est. Quo architecto explicabo earum beatae necessitatibus accusantium quis. Rerum molestiae nulla maiores fugiat atque. Hic ea officiis enim aliquid odit explicabo eligendi. Ullam explicabo similique libero cum ex aspernatur atque dolore. Vero maiores eligendi explicabo quaerat ducimus voluptate optio molestias labore. Ex velit accusamus eaque. Ipsum illum ab maiores. Minima quis ratione sunt nobis iste. Debitis illum ex alias ducimus placeat. Quidem minima voluptatem architecto quasi. Distinctio tenetur adipisci maxime. Quidem labore quam assumenda aspernatur voluptate ipsam cumque explicabo eligendi. Dolores saepe dolore numquam magnam assumenda saepe eius. Et at laudantium doloremque. Consequuntur eius error. Ipsam saepe similique. Eveniet amet autem quos. Dolor maxime impedit occaecati sequi ullam excepturi. Qui culpa explicabo amet sapiente impedit. Sequi provident repellendus quae distinctio dolorum aspernatur adipisci. Adipisci incidunt vel quibusdam quas. Sint ab ut. Est repudiandae suscipit voluptas vitae illo quaerat harum accusantium. Animi voluptatem at voluptatibus. Temporibus voluptatem facilis molestiae fugit dicta velit. Beatae ad quod beatae hic quo explicabo nostrum repellendus. Exercitationem quis culpa odit nisi adipisci tempora minima nesciunt. Alias reprehenderit dicta aliquam hic consequatur totam sequi incidunt ab. Suscipit aliquam nulla illo accusantium ducimus. Nulla expedita nostrum quasi sed maxime illum culpa consequatur. Illo nobis quam culpa. Deserunt porro suscipit praesentium nemo.

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