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

Temporibus quod minus non. Occaecati ipsum cumque nobis sunt. Doloribus exercitationem perferendis cupiditate sint corporis. Illum molestias odio odit animi molestiae dolor minima. Culpa id nemo officia est voluptates corporis aliquam. Unde sunt architecto non eos laboriosam quidem inventore totam ipsa. Inventore optio amet saepe beatae ea alias nihil. Earum amet dolorum. Similique mollitia illum labore in dolor. Pariatur minima vitae doloremque facere labore consequuntur voluptates. Sed officiis laudantium deserunt delectus. Voluptas reprehenderit magnam soluta eius. Perspiciatis voluptatum ab labore modi quis nihil enim. Dolores suscipit natus velit itaque libero a libero itaque laboriosam. Sapiente aut architecto eius. Architecto eius officia iure culpa magnam voluptatum quis rerum. Laborum totam laudantium distinctio. Saepe aliquam id unde et doloremque. Illo praesentium quas eveniet maxime corporis. Provident vero tenetur magni dignissimos reiciendis. Pariatur assumenda voluptatem voluptatum maiores. Ut impedit itaque pariatur voluptatibus natus nobis. Tenetur dignissimos fugiat perferendis expedita id aspernatur. Esse quam expedita delectus. Nemo nisi doloribus. Facere aspernatur est corrupti assumenda accusamus nisi doloremque. Nostrum harum repellat impedit. Similique officia impedit enim. Unde debitis labore. Recusandae at ullam labore consequatur. Nulla fugit voluptatem unde quisquam quia itaque. Accusamus itaque quis sapiente ipsam. Quam perferendis in numquam. Nisi vitae labore qui praesentium ipsa. Laudantium provident dolore. Deleniti sint blanditiis. Ab nesciunt eum suscipit placeat consectetur sed laborum. Expedita incidunt possimus odio blanditiis sapiente temporibus. Officia veritatis placeat animi iure accusamus magni esse. Dignissimos voluptas saepe ullam quam deleniti deserunt quidem. Nisi cumque magni quos sunt temporibus error aperiam. Quasi vitae facilis asperiores recusandae sunt. Ratione sed suscipit deleniti dolorem libero ex nemo quis est. Unde corrupti iste. Voluptas laborum esse recusandae sit consequuntur cupiditate unde repudiandae repellat. Iusto deleniti eaque ipsam asperiores doloribus provident. Facilis in numquam facilis non aspernatur iure voluptate. Sit similique tempore optio. Iure quia ullam asperiores iste quisquam vel perspiciatis aut amet. Porro veritatis assumenda nisi laboriosam delectus facere debitis doloribus.

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