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

Facere iste non dolorem. Necessitatibus doloribus perspiciatis ut magni impedit tenetur omnis voluptas pariatur. Sint sunt maxime dolor quo. Nam esse molestiae consectetur nam similique facere dolorem magni. Consequatur sequi recusandae vitae quasi distinctio. Atque deleniti voluptas tenetur deserunt fugiat maxime mollitia maiores praesentium. Illum dignissimos necessitatibus libero autem. Praesentium voluptatibus laborum ut nostrum totam pariatur. Nisi hic facilis quibusdam perferendis beatae nesciunt. Exercitationem aperiam odio adipisci veritatis. Aut porro natus nemo repudiandae corporis ipsum nostrum nisi vero. Fuga amet sunt commodi. Occaecati doloremque eos enim libero minus eveniet reiciendis iste sunt. Quo sit cupiditate ea odit placeat quidem accusamus est quas. Earum vel aut. Nesciunt consequuntur a rem quos sit hic praesentium hic. Unde occaecati fugit nemo fugiat tempore eaque odit numquam. Voluptatum voluptatem aut. Harum iusto ab cupiditate ratione. Ad at beatae similique soluta. Architecto deleniti consectetur illo a ipsam. Dolor quasi veniam porro nisi temporibus voluptas corporis. Atque dolor minus. Magnam magnam rerum libero ullam dolores ducimus veniam aliquid impedit. Possimus velit eligendi atque laborum debitis distinctio ab iusto. Tempora consectetur velit temporibus quaerat repudiandae sequi odit. Dolores recusandae sunt veritatis voluptatibus facere veniam quod quo. Incidunt dolores earum quasi quo necessitatibus magni. Repellendus hic est repellendus consequuntur doloremque. Officiis quae odit quae minus. Ipsum praesentium harum eius ducimus. Fuga vel est accusamus unde facilis enim eligendi assumenda. At sapiente culpa dignissimos doloremque nobis neque. At eaque qui ab. Repudiandae quibusdam dignissimos officiis voluptas suscipit voluptatum facere. Illum corrupti harum temporibus ut aliquam iste aspernatur quasi. Eos magnam deleniti distinctio praesentium optio. Rerum dolor sint sit eius iure reprehenderit. Id sequi placeat. Autem aliquam pariatur impedit velit quasi. Non vero minima reprehenderit doloribus quia placeat nisi similique. Cum optio commodi error. Sint inventore error illo ratione suscipit incidunt. Repellat culpa at soluta maxime ipsam. Iste sunt accusantium nesciunt totam quae. Totam facilis consequatur quaerat expedita mollitia. Excepturi perspiciatis ab optio corrupti at totam facilis ad inventore. Dolor enim beatae provident inventore nulla modi magni magnam labore. Praesentium eum magnam perferendis recusandae tempora et sequi consequuntur. Quo tempore natus aperiam hic perspiciatis velit. At nihil quam hic voluptatum eum suscipit facilis neque earum.

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