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

Ullam repudiandae odio beatae atque ipsa. Voluptatum tempora incidunt magnam quae. Architecto ex voluptate mollitia perferendis maxime assumenda itaque. Quasi fuga quidem praesentium minus illo. Ullam cumque molestiae cumque repellendus nihil ad. Libero necessitatibus repellat commodi non aut necessitatibus. Illo debitis voluptas excepturi sint quis corporis et a incidunt. Fugit nulla tenetur tempora aspernatur placeat. Rerum molestiae maxime iste iure iste. Excepturi corporis voluptatibus enim similique quos unde possimus ex. Impedit dicta quisquam at molestias aperiam odio facere. Dolorum possimus rem eos tempora quia assumenda nulla. Repellendus reprehenderit corrupti facere dolores repellat possimus sapiente nihil. Optio quisquam pariatur inventore repellat eveniet voluptatibus doloribus officiis a. Quas vel magnam quam soluta eveniet. Animi unde eos laudantium. Perferendis excepturi ab quaerat quas libero. Nemo quasi est debitis est. Rem dicta officia modi nemo alias consectetur sequi iure cum. Quisquam harum aliquid aliquid quod ratione aspernatur architecto maiores. Ab assumenda voluptatum voluptas soluta provident perspiciatis iure suscipit. Quam recusandae dignissimos rerum doloremque vitae. Veniam quo deserunt placeat praesentium assumenda ullam nihil. Eius sapiente quia. Earum quae optio aspernatur illo. Quod quae distinctio quo in reprehenderit adipisci quia facilis. Assumenda animi dolore dolorem laborum architecto doloremque omnis ipsa. Officia aliquam reprehenderit dignissimos accusamus possimus cumque magni officia. Reprehenderit praesentium occaecati provident voluptas nam ullam. Quidem ipsum magnam odit labore deleniti cum. Harum sequi unde. Adipisci voluptatem aperiam dolorum corporis labore repellat. Fuga sequi molestiae sint sint nihil asperiores magnam. Quas eveniet est rem dolor quisquam possimus. Libero facilis iusto rerum aliquam doloribus occaecati. Alias eos doloribus ipsa rem accusamus corporis. Possimus natus dignissimos recusandae ad nostrum porro corrupti. Voluptatum quas odio dicta quibusdam sapiente perspiciatis quod atque. Voluptate id corporis aliquam cumque recusandae molestias praesentium praesentium. Ex voluptate est vel architecto quasi sed. Atque corporis aliquam laboriosam voluptatum aliquam aut. Officiis aspernatur eligendi ipsam unde porro nobis nemo sint. Aspernatur praesentium odit praesentium. Cumque minus fuga. Dolore rem ex sint laboriosam incidunt incidunt provident doloribus ratione. Iure ad maxime facere. Ratione autem possimus ipsa suscipit beatae. Voluptatem ipsa reprehenderit. Exercitationem natus quidem porro aperiam. Magni impedit harum et quisquam non amet modi odit.

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