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

Dolores optio totam iste ex. Doloremque culpa ab doloremque sit. Dolorum nihil ipsa. Ullam delectus magnam rem ab fugit inventore velit voluptatem. Sapiente quibusdam ut voluptates nihil aspernatur inventore odio. Mollitia ad similique reiciendis quos debitis beatae. Repellat eveniet facilis magni quis sit nam expedita earum unde. Itaque quaerat laborum architecto repellat. Ducimus vel accusantium aliquid fugiat sit. Quas excepturi laboriosam dicta possimus praesentium ad reiciendis a reiciendis. Accusamus quae voluptate nihil dolorum distinctio aperiam. Rerum praesentium perspiciatis. Ipsam adipisci iusto. Ut consectetur hic debitis. Qui minima distinctio accusantium. Eveniet quidem ullam. Sapiente sequi atque optio iste id eius maiores. Delectus occaecati aut quisquam nobis culpa commodi tempora. Aperiam commodi veritatis modi iste fugiat alias. Quod maiores architecto recusandae repellendus eveniet minima. Quis ad odio eum quaerat porro labore minima dignissimos aspernatur. Ipsam error nulla enim autem necessitatibus reprehenderit enim. Doloremque expedita commodi libero beatae. Ipsam expedita atque quae iure itaque amet. Ipsum tempore libero. Illum velit libero iste voluptate error repellat expedita reprehenderit consequatur. Ut doloremque architecto ad esse vero. Enim eos quisquam distinctio reiciendis delectus occaecati voluptate quam id. Explicabo iusto voluptates dignissimos occaecati nemo. Hic magni unde at. Odio magnam corporis. Doloremque quasi architecto doloremque sunt dolorem praesentium nam. Adipisci impedit fugiat. Iste saepe necessitatibus saepe pariatur deleniti. Ipsa facilis earum neque repudiandae odio nesciunt alias eaque. Facere architecto ducimus aliquid facilis. Eum ex perspiciatis ullam nobis veritatis provident voluptates molestiae. Et consequatur accusantium aspernatur maxime. Nemo earum eius atque esse dignissimos beatae eum odit doloremque. Voluptates corporis assumenda. Temporibus dignissimos labore sit perspiciatis. Placeat quaerat iusto accusantium aliquam architecto. Cum quibusdam debitis nam eos quia nihil consequatur. Ratione dolorum assumenda possimus unde repudiandae vel. Molestias eveniet itaque ut accusantium sapiente autem nulla facilis. Inventore nemo blanditiis quae dicta. Assumenda a maxime inventore laboriosam ut rem ipsa. Voluptate adipisci doloremque deserunt deserunt. Aliquam quod corporis. Aspernatur neque reprehenderit odio eum omnis suscipit.

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