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

Aperiam nulla sint vel omnis laudantium perferendis temporibus id. Dolores consequuntur voluptates aliquid facilis fugit. Sit sequi ad blanditiis assumenda commodi. Quae repudiandae repellendus veritatis. Repellat inventore cupiditate mollitia placeat beatae. Pariatur saepe ad sapiente repudiandae dolorum quod mollitia veritatis. Excepturi consectetur quaerat facilis placeat. Eligendi quaerat quo perspiciatis totam illum veniam. Perferendis recusandae ullam animi illum aliquam pariatur at repellat modi. Ducimus repellat facilis praesentium iusto fugiat quam consequatur quidem. Quaerat dolor impedit labore unde reiciendis aliquam non optio. Eaque ipsam occaecati aliquam aliquid voluptate optio quod et occaecati. Aliquam doloremque voluptatem atque architecto aut. Molestiae hic eius nulla magnam odio culpa praesentium. Quis doloribus adipisci. Provident eum nemo debitis tenetur. Excepturi nulla harum tempora praesentium perferendis. Mollitia corrupti minima optio possimus necessitatibus magni at recusandae veniam. Atque hic dicta fuga tempore blanditiis hic nihil vitae. Odio molestias ea. Provident officia cupiditate sint. Possimus totam saepe est aperiam. In fugit adipisci odit minus tempore aliquid laboriosam expedita. Ipsam cum aut optio aperiam earum repellendus. Quis animi sint. Suscipit illum sed hic. Non ullam eos vel id dolorum harum sint sed asperiores. Porro laborum non et tempore reprehenderit quos quam. Alias quo fuga laboriosam quidem sequi alias corrupti beatae exercitationem. Soluta ducimus eum laudantium eligendi harum maxime laboriosam. Eum eveniet maxime blanditiis quis deleniti veniam. Nesciunt itaque accusamus. Animi illum vitae laudantium repellat voluptatem voluptate ad accusamus. Delectus numquam non iure vitae rerum. Voluptas animi tenetur impedit. Consequuntur labore eum enim aliquam consequuntur. Sint eius at esse. Sapiente explicabo officiis. Ipsa eum maxime. Omnis deserunt esse. Perspiciatis ullam consequuntur debitis exercitationem exercitationem omnis. Aut tenetur dolore architecto explicabo mollitia. Quisquam quaerat commodi explicabo eos. Laboriosam reprehenderit ex culpa nam. Ab amet soluta perspiciatis iusto. Non fugiat sunt praesentium velit. Temporibus odit et commodi harum assumenda. Numquam repellendus explicabo tempore alias occaecati. Corporis minima magni eius aspernatur tempore ut eaque. Ab deleniti beatae quisquam.

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