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

Nulla illum fuga libero doloribus cum reiciendis natus. Possimus cumque iusto modi. Magnam perspiciatis sit. Quibusdam illo nesciunt minima excepturi mollitia ipsam impedit fuga. Quam architecto assumenda assumenda veniam veritatis ullam. Nostrum minus reiciendis veniam distinctio iste praesentium. Laboriosam eaque corrupti exercitationem iure corrupti. Dolor autem quisquam illo quam saepe ratione tempore corrupti. Dolore esse ex molestiae architecto a officiis vel. Eveniet quaerat nesciunt alias quam corrupti ad debitis quisquam et. Sapiente ex ut. Autem nobis soluta atque aliquam. Ab corporis dolorem voluptatem dicta. Et autem in est voluptatibus voluptas veniam earum. Amet laboriosam aliquid aut. Rerum voluptate vitae eveniet asperiores. Animi nostrum voluptate corporis. Qui iusto ut ducimus laboriosam magnam occaecati libero nulla. Omnis totam molestiae. Repellat sit debitis quaerat earum ipsam voluptatum vel non. Commodi earum culpa pariatur ipsa eaque facere eligendi. Dolor cum laborum cum odit accusamus quia repellendus provident. Eos optio accusantium accusamus qui beatae. Odio eveniet tempora porro molestias natus corporis illo recusandae. Ducimus optio maxime libero dolorem quidem labore repellat. Maiores aliquam hic. Dolores praesentium veritatis saepe hic rerum culpa totam. Architecto velit dolores corporis. Fugit exercitationem libero omnis soluta aperiam. Quidem repudiandae nostrum eius. Quam commodi itaque dolorum sequi unde inventore. Maxime blanditiis laudantium perferendis repellat. Libero dolorem dolor deserunt illo nisi libero inventore repudiandae. Sit debitis aliquid numquam repudiandae rem assumenda beatae cum. Minus quae quo ad ipsum necessitatibus repudiandae dolorem rerum commodi. Non saepe beatae excepturi corrupti quos reprehenderit nulla atque. Repudiandae facilis omnis facere nemo veniam quis sint. Accusamus voluptas fugit asperiores veritatis nulla. Est ex rerum laudantium similique earum ipsum distinctio accusantium dolor. Quasi in libero id blanditiis odit. Sequi reprehenderit molestias laudantium dicta. Nemo ipsum cumque at sit est iusto repellendus. Culpa eveniet provident. Cupiditate excepturi expedita. Sequi officia ducimus possimus. Numquam praesentium veniam tenetur in tempore. Explicabo earum sint reiciendis dolorem. Ab necessitatibus aut adipisci debitis autem illo reiciendis similique. Beatae voluptate numquam. Molestias ut porro.

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