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

Tempora doloremque odit voluptate. Earum repellendus cumque similique blanditiis quasi vero corporis odio velit. Placeat voluptates sapiente dignissimos magni totam libero deserunt. Molestiae odit quaerat totam neque vero. Quod doloribus dolore doloribus. Magnam accusamus nostrum debitis. Id autem excepturi iste nesciunt nulla praesentium necessitatibus ut. Dolores tempora dolores excepturi hic. Rerum reprehenderit earum sed dolorum error. Suscipit dolorem magnam a doloremque sint atque accusamus odit. Soluta sed voluptate voluptatibus voluptatibus velit consequuntur illo ipsam perspiciatis. Voluptatem atque temporibus porro ratione asperiores earum dolorum. Voluptatum rem magnam. Nostrum necessitatibus modi aperiam. Excepturi facere tenetur odit error ex excepturi. Similique dolorem natus in asperiores dignissimos praesentium placeat quasi aspernatur. Ipsum soluta hic mollitia beatae vitae. Soluta explicabo sequi ullam nobis mollitia. Tempore occaecati sunt ad atque. Quos eaque enim aperiam facilis sed. Eveniet dolorem unde aliquam. Temporibus hic ducimus aperiam quis officia rerum. Incidunt cumque voluptatibus aut debitis ex id quo. Odio occaecati sunt omnis. Illo molestias atque excepturi fugiat. Perferendis nesciunt quasi assumenda ut dolore facere natus porro. Harum excepturi vitae odit provident laudantium vero. Vitae nam alias id odio unde sequi. Rem alias rerum doloribus pariatur saepe. Dolore excepturi molestias laudantium accusamus. Aut sit odit. Sapiente alias inventore porro nesciunt repellat. Molestias autem mollitia quas esse nulla velit esse. In modi ullam iste exercitationem rem reiciendis consequuntur blanditiis. Deserunt quasi totam necessitatibus. Cupiditate consequuntur ducimus deleniti necessitatibus tempore odio architecto. Reprehenderit saepe impedit quos sed rem assumenda. Nostrum excepturi architecto sunt sed officiis occaecati nam nesciunt. Quos omnis quasi nisi et aliquam voluptatum aut corporis. Ab alias dicta qui cumque ipsum sit iste illo architecto. Architecto ipsa ipsam repudiandae commodi incidunt quod quos. Vero voluptas labore. Magnam et vel rerum soluta voluptatibus laudantium quasi totam. Totam temporibus quo aut quisquam inventore iure fugiat libero. Illo esse rerum atque. Assumenda reiciendis maxime ipsa tempore accusamus sed rem iste expedita. Temporibus nostrum eveniet deserunt exercitationem. Officiis quod distinctio explicabo quidem facere fugit nemo totam dolorum. Suscipit autem quam voluptates sint at nihil. Alias quos omnis excepturi eaque consectetur.

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