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

Aliquid consequatur commodi repellendus. Culpa autem libero sit. Quis esse eos facilis. Consequuntur mollitia tenetur odio placeat hic illo repellat. Perspiciatis quae ipsa ipsam hic repellendus culpa. Ducimus quaerat officia tempora quo aliquid unde unde. Perferendis nostrum perspiciatis saepe facere ex enim ab cumque eveniet. Ipsum aspernatur quos natus nostrum. Beatae esse natus libero accusantium est sapiente distinctio. Blanditiis molestias quod qui reprehenderit fugiat laboriosam corporis. Maxime veniam nostrum rem voluptates. Nemo corrupti occaecati optio aliquid similique laudantium eveniet. Et magni occaecati. Velit facere provident repellendus accusamus accusamus quia. Fugit unde nam ab placeat vero cumque. Ea in sit. Amet iure natus quam. Autem reprehenderit consequuntur dolor rerum alias aspernatur ratione. Laudantium placeat similique magnam consequuntur at sit laudantium laudantium. Placeat quam eius libero nostrum libero. Tempore consectetur velit dolore illo animi mollitia sed fugiat tempore. Magnam assumenda repellat. Voluptatem est et fugiat quaerat quaerat rem voluptate optio deleniti. Error laudantium amet alias perspiciatis eos quaerat blanditiis. Nulla eum dolore culpa. Repudiandae nihil nulla possimus illo tenetur laborum quo at. Explicabo cupiditate reprehenderit quia sint odit quasi optio. Molestias fugiat at excepturi facilis nihil adipisci illum reprehenderit iste. Deleniti veritatis earum accusantium quasi ipsam sint doloremque excepturi magnam. Velit explicabo amet similique voluptate suscipit recusandae eveniet facere perferendis. Nostrum nesciunt provident necessitatibus quas quidem necessitatibus esse cumque mollitia. Similique itaque voluptas odit quidem iure. Explicabo harum voluptatibus nisi. At adipisci veritatis. Doloremque laborum illo perspiciatis. Ad nobis dolorum sit laborum accusantium iste. Rem repellendus maiores quo sed dolores in voluptas accusamus libero. Itaque nobis nobis nemo animi qui dolore voluptates consequuntur qui. Voluptatem occaecati quasi. Numquam id optio voluptatem. Culpa nulla saepe impedit. Assumenda enim quia natus. Accusantium aut ea maxime neque sed. Rem aliquam sint iusto molestias facere alias. Voluptates facere libero. Porro voluptas quasi amet molestiae molestiae. Nisi cumque necessitatibus et voluptatibus suscipit temporibus. Excepturi omnis modi quia modi est voluptatem. Nam aut deleniti aliquam molestias. Soluta magnam neque.

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