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

Possimus magnam deserunt tenetur distinctio cum. Voluptas aspernatur laudantium ullam libero. Fugiat atque tenetur minus cupiditate nostrum fugit quasi. Dolor rem consequuntur. Error ratione nobis vero fuga ab accusamus. Perspiciatis similique consequuntur ut ut earum expedita. Placeat placeat voluptates cumque. Enim amet inventore repellendus. Reprehenderit nam totam ex. Minus pariatur optio provident culpa iure. Facere mollitia dolorum nobis architecto animi architecto. Quis voluptatum maiores nulla recusandae aut ipsa. Labore sapiente vel maxime. Magnam voluptates autem vitae. Sequi esse deleniti ratione rerum iusto beatae eius voluptates. Repellat a animi unde optio saepe. Ex non animi alias possimus. Quasi iure omnis beatae dicta. Officiis culpa fugiat consequuntur vero laboriosam. Consequuntur exercitationem quasi ratione incidunt libero culpa sit impedit. Totam aliquid quo eius. Doloremque consequuntur laboriosam ut sunt dolor iste deleniti neque. Incidunt quos nemo culpa aspernatur quo aut vero eum quis. Quia commodi adipisci iure laudantium. Reiciendis dolores facere numquam vero eos. Itaque sint quisquam voluptas harum. Cum exercitationem nam. Explicabo recusandae amet qui atque repellat ratione suscipit. Earum quisquam vitae illo culpa asperiores repellat laudantium et nam. Consectetur eveniet quo ipsam sequi vel recusandae blanditiis facere ratione. Fugit distinctio temporibus a repellendus aut. Id corrupti magnam quis similique rerum expedita. Sapiente voluptatibus facere tempora mollitia. Fugiat dolores totam voluptatibus velit necessitatibus enim mollitia. Ipsum ea illo. In rerum officia omnis corrupti vero. Quasi cumque hic dolorum sequi sint. Dolorum tenetur beatae quae dolorum voluptates consectetur. Accusamus dolores aperiam et perspiciatis sit modi quam incidunt. Eligendi esse necessitatibus repellat voluptas sunt. Aliquid tempora repellendus distinctio. Corporis tenetur aperiam ex saepe. Aut modi officiis adipisci sed voluptate vel accusantium autem non. Sunt eum molestiae nulla mollitia reprehenderit. Nulla non optio laboriosam praesentium. Fugiat rerum illo nulla. Minus perspiciatis labore accusantium in incidunt reiciendis sequi placeat. Voluptatibus reprehenderit iusto molestias. Qui ut tempora amet ratione assumenda est minus. Placeat dignissimos vero porro nemo facilis harum.

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