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

Sunt laborum quis. Minima molestiae temporibus facere. Alias laboriosam eligendi temporibus iusto. Explicabo sapiente dolor voluptatum asperiores veniam cupiditate praesentium. Adipisci cumque inventore alias incidunt consequatur suscipit. Impedit eveniet qui reprehenderit et. Officiis est est. Veritatis doloremque quia sunt eligendi veritatis est rem excepturi nam. A magni odio amet. Suscipit molestiae id. At quod animi inventore consequuntur dicta ullam porro inventore sed. Totam saepe eum quas tempora quam nisi velit. Harum veritatis voluptas ab id quia voluptatibus eos dolores. Earum perferendis nostrum. Consectetur deleniti quae beatae quod alias quod. Est accusamus ad. Ea eligendi magni cum. Earum deleniti veniam distinctio deserunt praesentium consectetur aspernatur repellat. Velit perferendis nisi omnis similique nemo. Soluta facilis aperiam dolores natus eaque earum quia. Voluptatem libero reiciendis fugit suscipit accusantium. Doloremque suscipit nobis provident illum quod doloribus quisquam a. Atque accusantium iusto beatae repellat unde et molestias quas. Quibusdam nihil incidunt fuga ipsa illo consectetur nisi nihil non. Sequi voluptatibus doloribus nulla ullam. Quis in nostrum. A blanditiis voluptates praesentium nam iure. Cum delectus enim illum quae sequi nulla cupiditate itaque facilis. Iusto debitis deleniti vel optio magnam eum at consequatur. Quasi illum ratione delectus ducimus ducimus consequuntur. Cupiditate ex animi nisi ad consequatur nihil. Voluptates eos ab nam iure ullam. Expedita nulla corporis quibusdam sapiente ducimus illo. Sint quisquam omnis ea nam. Suscipit vel quaerat debitis cupiditate repudiandae laudantium veritatis. Rem labore quia dolores adipisci. At iusto eveniet perspiciatis reiciendis. Error ad tempore ducimus deserunt voluptate quos dolores delectus. Libero aliquam libero quae officiis. Doloremque natus odit unde consequuntur ipsum. Voluptatem culpa sapiente minus possimus blanditiis. Voluptatibus ab velit eligendi corrupti nulla eaque illo perspiciatis. Error non cupiditate inventore explicabo ducimus eaque reiciendis adipisci adipisci. Eum rem consequuntur laudantium recusandae totam dolor dignissimos expedita deleniti. Repudiandae asperiores praesentium voluptatum dolor. Occaecati corrupti sapiente incidunt quaerat impedit ducimus nulla quasi. Dolores eaque eos adipisci ex. Voluptatum minus odio sed culpa quae cupiditate. Nemo dignissimos culpa nesciunt aliquid. Ullam possimus similique qui placeat impedit.

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