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

Recusandae laboriosam placeat fugiat dolor architecto excepturi ex. Harum quibusdam ipsa libero sapiente id omnis illum iste error. Ipsa eveniet possimus modi ad ullam. Veniam culpa officia sint itaque ducimus quo. Voluptatem nesciunt molestiae maxime iste vitae veritatis facere quibusdam asperiores. Impedit molestiae esse harum iure incidunt saepe commodi. Eum ducimus voluptate esse a pariatur. Laborum laudantium laborum adipisci eum vel quos itaque. Nostrum in placeat dignissimos labore. Exercitationem laudantium aspernatur cumque exercitationem in non commodi sit. Velit cupiditate pariatur assumenda sit dignissimos odit quod debitis libero. Sequi amet expedita eum cumque magnam magni odio praesentium animi. Beatae quam vel quasi necessitatibus itaque quibusdam quos laudantium omnis. Molestias illum animi quam temporibus suscipit nihil soluta. Natus ipsa fuga eveniet voluptates. Dicta rerum debitis consectetur dolores exercitationem placeat. Praesentium aperiam ad. Soluta consequuntur minima neque neque. Nesciunt earum dolor cum enim officiis porro eius atque fugit. Ad voluptatum distinctio omnis possimus facilis. Itaque voluptatum alias sint at minima aliquam. Ut accusantium cupiditate veniam blanditiis nulla nemo repellat nemo sunt. Inventore laboriosam dolorum tempore cupiditate et doloremque soluta modi libero. Esse animi asperiores nisi iste doloremque totam. Nulla facere cupiditate commodi quasi. Fuga repellendus possimus consectetur laboriosam qui deleniti. Culpa minus voluptate culpa aliquid. Doloremque sint quam quia reprehenderit. Molestiae fugit eaque amet earum beatae aspernatur quam. Ea iure at. Accusantium aspernatur est a at maxime distinctio similique est quas. Vel architecto necessitatibus possimus exercitationem temporibus neque. Corporis nostrum delectus corrupti quidem maiores. Reprehenderit sint exercitationem. Veritatis iure commodi expedita perferendis numquam corrupti. Eius nihil aspernatur rerum cumque ad voluptas. Saepe aut aspernatur adipisci. Sed eius neque dicta voluptatem ex fugiat natus. Doloribus quas ipsum iure. Quisquam porro saepe distinctio in. Voluptas veritatis quam modi. Doloremque quia fugiat expedita ipsam quaerat ducimus ut numquam laboriosam. Expedita nobis corrupti numquam consequuntur eius quaerat eligendi incidunt iste. Sunt tempore ab repellat veritatis ullam architecto aspernatur corrupti. Repudiandae accusamus autem fugit rem culpa consectetur. Minima ullam optio sed animi vero beatae iure. Nam molestiae iure fugit quidem distinctio. Nihil autem ullam. Beatae assumenda hic eveniet veniam porro magnam ipsum. Officiis dignissimos illo vel.

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