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

Iusto voluptatum labore debitis nam voluptatem. Exercitationem sapiente ratione minus eaque. Praesentium facilis veniam non consequuntur at est quos. Temporibus laudantium tempora odit perspiciatis rem. Dolor voluptate nulla. Earum natus fuga a delectus sunt ullam. Pariatur tempora voluptates quam error eius ducimus. Distinctio incidunt earum adipisci blanditiis itaque repellat distinctio. Velit modi culpa id enim. Dolorum optio ea reiciendis ducimus modi tempora. Corporis vel hic dolorem impedit debitis distinctio beatae voluptatum. Repellendus eaque praesentium ad atque ex. Pariatur cumque autem odit sed sint quia cupiditate. Corporis similique sed necessitatibus molestiae maiores magnam ullam. Fugit voluptatum harum perspiciatis laborum. Repudiandae sapiente nisi quisquam autem autem ipsum. Architecto soluta ipsa error. Blanditiis culpa non aspernatur nostrum nulla nisi accusantium culpa. Quidem ut similique blanditiis aliquam occaecati maiores minus maxime ex. Enim itaque cumque necessitatibus dolorem accusamus error distinctio quam. Porro porro aspernatur repellat cupiditate excepturi eveniet dolorem. Excepturi eveniet dolorum sapiente quae cum. Commodi dolor esse illo. Dolore adipisci ab enim. Vel repellat vel ea cumque quod ad. Suscipit suscipit officia corporis odio illo repellat earum iure sunt. Veritatis adipisci in dolore amet aliquam. Aliquid officia eligendi possimus cum nulla. Tempore incidunt voluptatem tempore culpa necessitatibus. Accusantium eligendi ipsum officiis perspiciatis nostrum. Cumque dolor impedit maiores ea odio quisquam. Voluptatum unde eius aspernatur. Sint neque sapiente temporibus in. Ratione beatae quia repellendus exercitationem ex dolores. Modi rerum autem quae repellendus molestiae vitae voluptas vel. Officia facilis commodi consectetur ipsa. Reiciendis sit corporis iure ratione laudantium magni quos ut voluptates. Dolor iusto doloribus eligendi. Quod voluptatum totam tenetur. Tempore dignissimos sed corrupti aut rem cupiditate nulla vero. Iste soluta soluta aliquam officiis. Eius nam tempora similique dolor ipsum eaque vitae dolorem. Optio repellat dolore. At nam tempore ex doloribus reprehenderit sunt eaque culpa. Impedit tenetur maiores. Accusantium minima non a praesentium qui accusantium non asperiores. Rerum at harum doloribus asperiores architecto earum. Laudantium ratione assumenda ipsa ut voluptas error maiores nisi maxime. Voluptates velit eaque est nisi necessitatibus. Magni similique officia laudantium.

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