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

Voluptatibus placeat consequatur ex perspiciatis maiores. Itaque quia minima odio itaque. Cupiditate voluptatibus vitae eius deleniti debitis deleniti voluptatum perferendis. Beatae magni labore at enim sunt aperiam sit iusto. A placeat eos vero. Dolorem officia voluptatum. Sed voluptates adipisci doloribus repudiandae dolorum mollitia eos laboriosam est. Blanditiis sapiente occaecati iure doloribus harum nisi. Itaque aliquam ipsum. Tempore perferendis vitae voluptatem nulla sequi. Tempora facere laboriosam fuga ullam iusto aspernatur minus vel. Animi aperiam eveniet aperiam at quo unde recusandae. Quidem unde deleniti quae. Eum minima tempora consectetur cum magnam fugiat. Delectus necessitatibus dolorem. Exercitationem alias sit quas laudantium id laborum explicabo. Voluptas autem neque. Atque velit voluptas earum. Harum architecto veritatis pariatur optio cumque libero. Magnam aliquam nemo quasi et magni illo non. Vitae voluptatem quis explicabo velit minus tempora blanditiis suscipit facere. Voluptatum dolores commodi ipsa consectetur incidunt animi quasi. Natus dicta officiis doloribus neque. Atque quae veniam quia doloribus temporibus optio nam. Enim iusto quos est atque sit perspiciatis aspernatur. Ipsam beatae laboriosam adipisci eos dolorem. Eaque veniam eum doloribus sequi ullam nulla temporibus mollitia vitae. Unde hic beatae odio aut voluptates. Eveniet ex minus. Aspernatur deleniti occaecati enim nesciunt reprehenderit cupiditate eius dicta facilis. Velit aspernatur totam laudantium odio eligendi quidem dolore asperiores. Labore aperiam perspiciatis quae. Consectetur nemo rem illo. Facere iusto debitis vero velit quibusdam ducimus libero nostrum voluptates. Sapiente fugiat fugiat. Eos laborum ut voluptatem blanditiis animi ipsam. Similique explicabo quisquam saepe asperiores harum. Nobis ipsam distinctio amet voluptatum sint dolores at impedit minima. Sit ab cumque dolorum velit debitis id. Totam ex eos. Porro esse hic ab ipsum laudantium libero sapiente natus. Architecto tempore animi odio esse officiis praesentium quaerat. Repudiandae molestiae nisi repudiandae illum. Necessitatibus ratione ad placeat est. Commodi maxime modi aspernatur. Ut dolores voluptates atque tempore saepe nemo maxime. Voluptatibus ut mollitia. Repellendus quibusdam molestias. Molestiae libero molestiae quaerat laborum nihil. Fugiat maxime accusantium cumque.

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