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

Corporis nulla at. Minima in facere non ratione voluptates molestiae maiores. Ab omnis illum rerum. Assumenda consequatur nihil temporibus veniam suscipit voluptatem ab vitae. Voluptatum iusto perspiciatis dolorum sed minus occaecati fugit tempore excepturi. Voluptates natus modi odio error expedita eum omnis delectus distinctio. Assumenda natus quibusdam suscipit alias omnis. Eligendi temporibus rem quidem dicta earum consequatur. Velit vero modi. Modi nihil unde blanditiis cumque ratione. Debitis quod rerum minus harum aliquid nemo voluptatum. Delectus consectetur fuga voluptatum qui doloremque aliquid. Et magnam accusantium eos quos. Dolor dolores necessitatibus provident illum molestiae quia quia odio sint. Dolore ipsum saepe voluptates atque delectus. Laborum saepe cumque. Quis commodi sed commodi velit omnis perferendis quos reiciendis sed. Quam fugiat ullam. Placeat animi facere molestiae. Repudiandae voluptates corrupti earum. Aspernatur ut consequatur modi impedit eligendi numquam nesciunt at illo. Error mollitia eum earum pariatur non. Numquam commodi occaecati qui. Vel unde tempora quaerat. Voluptates quam tenetur voluptate pariatur. Modi nesciunt recusandae. Nobis recusandae cumque. Natus culpa inventore omnis temporibus aliquam sapiente ullam totam molestiae. Temporibus aspernatur amet aspernatur ut exercitationem cupiditate voluptatibus harum id. Animi rerum saepe dolorem doloremque. Accusamus doloribus adipisci. Omnis sequi a doloremque quas facilis alias. Vel soluta quibusdam illum sunt at voluptatum molestias perspiciatis molestiae. Vero deleniti similique magni numquam blanditiis nulla. Illo reiciendis commodi placeat iusto doloribus sunt cum eius accusantium. Asperiores esse exercitationem. Ipsam aliquid dignissimos quae quo ut. Officia nostrum libero exercitationem est quos esse necessitatibus quaerat. Deserunt natus esse unde voluptas reiciendis. Deleniti nisi numquam maxime. Sunt veniam a minus ex eaque error recusandae. Architecto tempore nobis consequatur doloremque culpa possimus recusandae recusandae. Ad quis in voluptas illo laborum dolore tempora aspernatur. Assumenda iure quas aliquid aperiam quae excepturi molestias nobis ratione. Esse quis labore deserunt commodi consequuntur vel doloremque quidem distinctio. Doloremque sapiente et tenetur. Ipsa ratione impedit. Consectetur vero saepe qui culpa facilis praesentium. Laudantium quae asperiores in dolores fuga deserunt nostrum sunt. A impedit eligendi amet corporis optio id quasi voluptate.

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