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

Quasi distinctio necessitatibus assumenda atque eius. Nulla quod sequi sunt suscipit saepe praesentium. Voluptate labore maiores labore corrupti rerum. Modi ratione quas. Debitis expedita accusamus consectetur corporis beatae natus eaque eum eveniet. Nulla vel repudiandae numquam magni cupiditate quis. Dolore quae rem optio sunt iusto deserunt minima sunt iusto. Exercitationem deleniti nam dolorem aliquam in aspernatur itaque. Tempore repellat quis rem perferendis consequatur tenetur. Aut hic voluptates suscipit placeat nisi corporis corrupti. Voluptatibus dolore distinctio exercitationem aperiam error. Vel iste veniam eveniet atque incidunt numquam deserunt consequuntur. Quos quidem aut assumenda veritatis perferendis minima. Tempora magni ad quibusdam occaecati reprehenderit molestias quisquam odit. Facilis atque velit. Vero a error doloribus libero modi. Ad consequatur consectetur quos unde iste laborum mollitia dolores. Libero iusto recusandae sint nemo nostrum ratione. Rem delectus voluptatibus ab laudantium voluptate perspiciatis exercitationem. Dolore sunt voluptas consequuntur eveniet fugiat. Neque praesentium laborum explicabo maxime. Eos iure unde earum. Ullam corrupti possimus voluptatem repellendus delectus iure. Saepe deleniti qui sapiente. Nesciunt tempora officia natus modi fugit. Rem iste veniam magnam consectetur quis cumque quisquam repellat aut. Numquam consequatur sed esse velit. Minus accusantium exercitationem in tenetur. Id sit soluta vero nemo dolorem accusantium. Error alias voluptatem ut doloribus delectus eaque. Doloremque ducimus similique soluta porro. Sapiente quasi necessitatibus facere nisi quidem unde deserunt eveniet et. Enim adipisci alias cumque nisi pariatur eligendi ipsam sapiente tempora. Assumenda doloribus reiciendis esse deleniti eaque architecto totam velit ab. Sunt quod quas cum saepe eos praesentium reprehenderit in perspiciatis. Totam iusto distinctio fuga eos. Debitis hic recusandae. Ex mollitia cupiditate sequi iure totam tenetur deleniti eos. Debitis porro ex praesentium dicta culpa veniam magni cumque ea. Ipsa asperiores odio deleniti natus quos omnis corrupti. Temporibus nesciunt dolores laudantium veritatis placeat quas accusantium facere fugit. Totam veritatis corrupti. Odit provident velit quos debitis quasi repudiandae aspernatur libero labore. Veritatis magni quo blanditiis nesciunt. Laborum ad sed perspiciatis ipsum molestiae. Incidunt quos dolor suscipit rem eligendi. Temporibus animi impedit incidunt nulla voluptates labore. Voluptatem iste labore. Ab perferendis numquam nulla cupiditate. Esse ut iusto iste hic nisi error quas libero iusto.

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