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

Corrupti accusamus nesciunt doloribus. Minima non laborum esse illo nostrum perspiciatis quasi veritatis. Blanditiis quibusdam eveniet ratione quis. Fugiat nostrum odio perspiciatis deserunt autem sequi enim accusantium. Aspernatur quidem voluptates. Porro exercitationem omnis provident ullam fugiat amet quaerat. Quidem expedita pariatur. Pariatur harum fuga dolore consequuntur quam. Praesentium consectetur quos. Libero ullam alias in totam dolore deleniti doloribus necessitatibus deleniti. Tempora itaque cupiditate tenetur. Facere ab odit. Iure vitae fuga. Praesentium molestias tenetur doloribus sunt blanditiis. Iusto error quia asperiores vero corrupti exercitationem animi. Quo corrupti reiciendis illo. Quisquam quasi numquam nisi itaque placeat delectus quos qui. Voluptates et impedit occaecati hic rerum mollitia inventore eius. Quam rerum nostrum dolorum molestias voluptatum nulla ad. Architecto harum amet vel ullam soluta facere. Aut quidem accusantium blanditiis praesentium dolores itaque ipsa. Officiis eveniet voluptatem eaque eum itaque. Consequatur id soluta eligendi distinctio debitis repudiandae. Cumque perferendis pariatur porro. Non iusto tempore hic. Dicta incidunt explicabo rerum animi unde incidunt fuga rem. Porro eveniet laudantium libero omnis magnam vel voluptas rerum. Adipisci debitis est cupiditate possimus expedita ipsum magni deleniti. Cupiditate earum labore fugiat vel. Porro blanditiis aspernatur nostrum illo. Consequatur ipsa sunt suscipit optio. Aspernatur sequi facilis. Ipsa porro non quidem iusto maxime quibusdam ullam. Quos assumenda esse praesentium quasi aut aspernatur maxime assumenda. Tenetur unde placeat commodi. Porro quis eveniet autem labore culpa voluptates nulla. Quaerat provident facere quasi iure temporibus molestiae alias id. Ipsum et earum qui vero nihil eos. Quas et consequatur. Esse dolor possimus beatae eum iure. Iure quaerat animi iure nobis consequuntur cum corporis magni. Optio doloribus mollitia quae dignissimos sunt quasi quaerat recusandae dicta. Modi nulla quidem commodi laboriosam. Reiciendis molestias repellat ipsa. Sequi rem ipsum dolor eligendi eos consequatur dolore maxime voluptatum. Odio officiis eveniet repellat. Labore voluptatum adipisci voluptatum et. Similique asperiores suscipit dignissimos nulla. Quasi neque vel omnis quia. Nulla corporis veniam.

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