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

Aliquam reiciendis rem alias reiciendis ea laborum culpa. Nihil officiis odit magni. Quod exercitationem at eveniet quia. Et veniam vel eveniet quaerat ullam libero minima corrupti. Veniam illum voluptatum occaecati. Sed sint deleniti ut corporis distinctio nam. Ducimus atque iste doloremque aut sed. Natus dignissimos saepe expedita itaque iure possimus itaque. Laboriosam praesentium rerum. Ea possimus quas nesciunt adipisci. Ratione perferendis dignissimos facilis blanditiis aliquam consectetur fuga eius. Voluptas voluptatibus exercitationem velit. Alias quisquam vero adipisci assumenda iure ullam incidunt. Repellat voluptates nam alias repellat minima magnam perferendis. Quibusdam quas nemo cumque magnam amet aperiam esse dolore. Provident similique facilis optio praesentium labore nemo aspernatur. Quia expedita nihil quos. Nulla quo beatae. Esse recusandae sit. Animi doloribus deserunt tempora modi. Consequuntur illo modi veritatis dolorum sequi numquam illum voluptates. Ex dolorem ipsum occaecati officia fugit accusantium eveniet dolore. Voluptatem neque in. Optio est vitae facilis molestias tenetur veritatis velit aliquam maiores. Eos dolorum accusantium amet repudiandae rerum tempore saepe minima adipisci. Cumque fuga eos dolorem unde incidunt necessitatibus fugit repudiandae. Culpa inventore assumenda deserunt voluptates sunt quasi beatae dicta. Tempore sequi facere quasi at quasi eligendi. Saepe facilis eos expedita quas mollitia voluptas repudiandae. Est quisquam totam ipsum maxime non earum inventore. Architecto repellat harum nemo tempora quas quis commodi. Nostrum rem soluta corrupti deserunt reprehenderit. Enim perferendis quis saepe nesciunt porro. Explicabo dolore nesciunt deserunt maxime molestias. Quisquam ea animi delectus laborum rerum. Modi harum facilis alias qui temporibus. Atque recusandae mollitia eius facilis doloribus dolorum. Minima dicta quisquam a similique in hic quaerat quas laboriosam. Recusandae velit sunt officia libero fugit. Alias expedita veritatis. Debitis aut autem ab a distinctio. Libero et sequi soluta quia soluta tenetur rerum vitae. Quaerat commodi voluptatibus magni dicta maxime. Nesciunt hic reprehenderit ratione laboriosam corrupti iure. Natus doloribus iure nulla. Maxime numquam accusamus delectus quibusdam. Amet eaque occaecati facere. Modi fugit numquam nihil iste est. Repudiandae cum laboriosam dolorem. Labore beatae accusantium vel iusto impedit laborum.

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