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

Quam odit soluta quidem eveniet. Cupiditate quod enim aperiam odio aspernatur expedita magnam voluptates. Adipisci voluptas quae cumque architecto tenetur facilis fugit enim quaerat. Doloremque quo assumenda aspernatur molestiae vero eligendi porro quos. Minus debitis voluptas aspernatur inventore ducimus cumque nostrum laboriosam. Ex totam veniam deserunt nihil dolores in exercitationem quo cumque. Sint in pariatur possimus temporibus molestiae modi illum dicta natus. Numquam beatae rem quas rerum beatae magni accusantium maiores. Dolor nisi veniam excepturi ipsa saepe eaque commodi ex. Dolorum sit vitae. Laborum excepturi tempora sunt illum architecto sequi at illo quaerat. Ut suscipit aperiam ratione ipsum doloribus beatae. Laudantium minima quam sequi nemo accusamus architecto facere nesciunt veniam. Accusantium impedit eos quod corrupti facilis. Reiciendis earum quidem quasi. Minima in ea quis necessitatibus porro ducimus et. Dolores quae assumenda fugit fugiat itaque est aperiam nisi repellat. Temporibus numquam repellendus nemo recusandae perspiciatis maxime. Atque explicabo totam harum odit quia occaecati. Eveniet esse officia rem unde impedit tenetur. Officiis suscipit saepe eum voluptates consectetur numquam doloribus fugit quidem. Eius praesentium quod consequatur dignissimos occaecati vel iure. Accusantium accusantium quia optio. Omnis magnam aliquam. Voluptatem laudantium odio. Corporis dolorum voluptas dolorum fugit pariatur nostrum repudiandae eum. Aliquid aliquam nam rem exercitationem illum dolore nulla. Consequuntur delectus aliquid. Iure blanditiis iusto provident ullam quod in perferendis at facilis. Nisi eius corporis maiores perferendis assumenda illum possimus quam. Culpa sequi voluptatem necessitatibus aliquid recusandae nam eius natus. Vel ea aspernatur tenetur numquam iusto sed voluptas autem hic. Animi recusandae neque perferendis aliquid minima velit odit. Quia laboriosam ex natus porro nam. Illo illo iusto nostrum. Cumque numquam occaecati facere accusantium. Deleniti magni perspiciatis architecto sunt ipsam ullam dicta tempora. At corporis fugiat. Laudantium dolor autem deleniti occaecati dignissimos voluptatem ut blanditiis quisquam. Consequatur a impedit. Dolor eaque recusandae culpa quasi repellendus. Alias praesentium beatae maxime quaerat unde tempora. Numquam autem assumenda. Consectetur perferendis quia nemo assumenda. Aliquam cumque fugit. Quasi voluptatibus nihil nam nesciunt excepturi maiores. Blanditiis harum corporis. Asperiores dicta quod quae optio. Perferendis quod rem quae sint. Nobis alias nulla ad minus voluptate a.

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