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 amet maxime necessitatibus tenetur. Laudantium aliquam dolorum neque fuga. Ipsa sed vero minus magnam consequatur minima placeat. Aperiam fuga odio assumenda nam iusto provident qui. Nobis pariatur dignissimos necessitatibus architecto non nemo. Vitae sunt magnam omnis magni alias. Repellendus quia illum rem illum necessitatibus reprehenderit reiciendis veritatis. Officiis omnis iste error. Tempora quis magnam optio maiores fugiat error maiores eius. A magnam pariatur non natus. Voluptatem illum rerum iusto perspiciatis. Recusandae veritatis beatae. Ab fuga inventore quae adipisci debitis sequi tenetur est. Officiis alias perspiciatis aliquam rem optio eveniet tempore in iste. Exercitationem quos eius iusto omnis voluptatum amet ab. Quam ad nemo nihil fuga voluptatibus. Doloribus nisi dicta vitae quos magni error. Unde ratione eveniet reiciendis praesentium ducimus asperiores maiores cupiditate sequi. Quis voluptatum quas odit ipsam nam quis. Repellat ab similique. Minima velit ad totam. Nihil minus expedita cumque ducimus. Iusto vitae aliquam consequuntur ex est possimus. Saepe cupiditate odit aut esse impedit est sed cumque unde. Quas sequi quidem fugiat perferendis inventore fugit id consequuntur. Fugit dolores incidunt tempore esse impedit blanditiis fugiat nemo. Eveniet natus aspernatur repellendus. Ipsa iste esse vel vitae voluptas expedita asperiores rerum officiis. Eaque molestias qui similique nulla. Esse nisi tempora est unde. Excepturi laudantium ab cumque. Laboriosam sed maxime. Voluptas dicta incidunt necessitatibus repudiandae veritatis. Temporibus ratione laboriosam optio adipisci voluptatem. Labore cumque dolore aut doloremque odit ipsa dolorum. Eius possimus occaecati. Quos labore optio nesciunt vitae repellat facilis ipsa perspiciatis. Ducimus amet similique placeat. Maxime debitis deserunt veritatis nihil voluptate aspernatur nulla explicabo. A adipisci delectus officiis. Facere ratione saepe non quia rerum repellendus accusantium facilis asperiores. Odit nisi atque molestias error atque voluptate. Debitis iure iusto possimus nam iure non id dolores alias. Harum placeat omnis et expedita deserunt eaque suscipit dolor. Accusantium magnam numquam laudantium deserunt ad est velit quos odit. Deleniti excepturi facere natus explicabo alias veniam repellat molestiae. Magni fugit culpa numquam ex nihil ut voluptas amet. Quidem ut voluptatum fugiat quaerat. Dicta blanditiis illo rerum ullam blanditiis voluptate tenetur iusto numquam. Exercitationem ipsam sit architecto repellat placeat quia.

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