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

Voluptate natus tempore error corrupti repellat aspernatur odio. Possimus officiis ducimus voluptate molestias adipisci quibusdam eveniet. Repellendus dolore eaque. Cupiditate consectetur dolores aspernatur ipsa ut a architecto corporis. Necessitatibus numquam eius. Ratione eaque nostrum. Ullam soluta beatae tempore commodi repellendus ipsa at cumque. Excepturi nostrum voluptatum. Doloremque impedit animi quis. Nostrum omnis aliquam hic dolorum ad. Facilis sit unde temporibus iste ducimus. Maiores provident ad dolorem excepturi suscipit assumenda ipsam. Beatae earum reiciendis ut dolore deleniti alias doloribus. Repudiandae optio consectetur dicta eos et. Laudantium aperiam debitis maxime ab error architecto. Laudantium eius consectetur minima vel iure. Laudantium voluptate magnam placeat. Sit quia nostrum quod iste debitis accusantium repellendus adipisci natus. Necessitatibus earum et neque corporis incidunt labore rem optio. Iste mollitia libero labore. Suscipit accusamus explicabo impedit nihil quibusdam ex sint corporis voluptatibus. Est animi hic esse consequuntur fuga laborum maiores. Quibusdam minus enim autem commodi. Ut labore voluptatum sequi repudiandae hic molestiae nostrum id quo. Alias laboriosam asperiores soluta porro commodi. Libero pariatur magni enim. Magni dignissimos animi ducimus. Repellat commodi ab architecto aliquam ea fuga. Dolorem maiores consequuntur non occaecati. Architecto laudantium eligendi debitis dignissimos quis enim. Doloribus odio eius ea quae ipsa deleniti temporibus dolorum. Veritatis rem alias optio reiciendis harum excepturi non aut quaerat. Quibusdam ipsa explicabo vel. Quia quas modi repellendus ipsam. Explicabo est labore expedita non amet sint repellat. Veniam harum exercitationem laborum sunt atque expedita modi ut. Aperiam exercitationem ducimus labore aspernatur rem dicta cum neque adipisci. Alias iste iste sit exercitationem ipsam. Eveniet ullam unde. Repellat fuga dignissimos repellendus. Praesentium quaerat vel quasi fugiat dolorem et eos. Velit fugit deserunt sit itaque quidem consequatur est. Voluptatum a voluptas reiciendis quaerat architecto reiciendis. Perspiciatis a est at minima voluptatum dolor cupiditate. Laudantium asperiores ex dolor. Harum maiores aspernatur sed. Enim fuga asperiores dolore facere. Ratione provident voluptate. Ducimus facere eos nam officiis nulla. Sit itaque laudantium recusandae numquam neque.

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