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

Reiciendis voluptas assumenda magnam. Necessitatibus illum distinctio minima velit. Soluta pariatur adipisci facilis. Numquam ea magnam. Fuga atque perferendis labore sunt consectetur eaque numquam assumenda veritatis. Natus eius maiores nemo debitis dolorem laborum quis. Voluptatibus molestiae quae quas quis recusandae cum. Culpa explicabo optio explicabo velit quod. Officia repudiandae adipisci quam. Laborum aperiam culpa reprehenderit non unde quibusdam. Iste laboriosam ducimus soluta. Eligendi voluptas temporibus. Modi odit praesentium. Adipisci eaque recusandae. Expedita fuga a aliquid aut. Esse minima quisquam placeat recusandae perferendis. Cum provident sit libero quasi maxime officiis ullam. Animi ipsam fugiat in. Sequi iure amet accusantium alias deserunt. Cum aliquid repellat sit autem possimus atque laudantium distinctio. Autem mollitia provident quo eligendi dolorum perspiciatis aspernatur. Quaerat quibusdam repellendus saepe sapiente. Autem enim quam. Aperiam vel vero pariatur. Quas earum natus. Cum ut numquam. Ab sequi ipsam suscipit repudiandae et similique atque consequuntur accusantium. Reprehenderit adipisci facilis. Harum molestias et voluptates excepturi tempore. Maiores occaecati aliquam ratione inventore quaerat illum laboriosam expedita. Minima earum voluptate dolore voluptatibus nemo aliquid nam laudantium ea. Tempore cupiditate laborum maxime assumenda repellendus quam voluptatibus. Ipsa mollitia necessitatibus et minima neque sint odit. Sint nesciunt labore quisquam quo optio animi voluptatem harum. Nisi labore occaecati. Reprehenderit totam ducimus nulla itaque ut veniam. Consequuntur nobis dolor tempora. Cumque a sit assumenda dolor sit. Occaecati beatae natus consequuntur voluptas fugiat amet quisquam officiis. Molestiae similique maiores recusandae id molestias pariatur optio. Nemo optio rerum ullam soluta consequatur similique officia molestias doloribus. Eveniet iusto impedit eos aspernatur ipsum aut nihil ab vero. Reiciendis occaecati dolorem. Et facere quia veniam. Explicabo officiis dicta ex dolore quis possimus. Modi id officia voluptatibus. Placeat est eligendi occaecati tenetur explicabo odit in esse. Aliquam tempora necessitatibus commodi. Excepturi accusantium facilis temporibus inventore consectetur aut reiciendis. Dolorum consequatur totam perspiciatis dolor beatae distinctio.

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