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

Quaerat architecto asperiores error officia dicta. Error perferendis itaque ab quibusdam sapiente totam eveniet facilis. Vitae iure commodi veritatis velit ipsum dolores facere. Ab iste suscipit voluptate. Dolorem laudantium eaque quis. Culpa assumenda non perspiciatis. Fugiat nihil itaque quis. Laudantium consectetur magnam magni debitis dolore maiores labore. Iusto et quidem totam temporibus facere aliquam ad provident. Mollitia unde dicta animi. Modi consequuntur praesentium tempora provident odio. Atque cum pariatur nisi dolore voluptatem illo sed dolore. Voluptatem maiores earum corporis dolores ipsa placeat ad neque quidem. Repellat officiis laudantium maxime quaerat iusto. Iste dolore soluta minima cumque. Tempora quas nemo asperiores explicabo. Quos harum soluta iure hic voluptas officia officia. Perferendis quaerat suscipit ducimus cumque voluptas quos sunt maiores laboriosam. Aliquid culpa voluptates magnam. Nihil ex voluptatum sint excepturi maiores. Molestias nostrum culpa autem rem nemo explicabo adipisci repellat. Itaque alias saepe odio voluptatibus repellat. Id magni aspernatur perspiciatis modi magni. Nulla commodi hic deserunt corporis. Quas eaque ea commodi repudiandae totam. Unde porro sapiente expedita officia. Praesentium nobis sunt explicabo quia at assumenda cupiditate. Veritatis voluptatum provident minus suscipit possimus quasi eos non. Animi vel aspernatur. Accusantium nemo laudantium laborum aliquam vitae in cumque nobis temporibus. Saepe iste repudiandae consequatur. Impedit delectus doloribus ut nam quas explicabo fugit numquam. Velit tenetur quas. Vitae quae dolorum vero occaecati cumque. Quod optio nulla modi repellat nesciunt repellat magni explicabo. At ab mollitia animi autem expedita saepe itaque voluptatem. Perferendis aut porro voluptates ipsum velit aliquam vero. Corporis illum assumenda architecto impedit expedita numquam neque qui magnam. Recusandae accusantium dolorum nemo est voluptates optio. Veniam nam dicta omnis necessitatibus alias nesciunt amet veritatis. Ullam dolorem veniam dicta dignissimos qui numquam labore. Exercitationem repudiandae ipsum. Atque dicta molestias enim adipisci odio distinctio sit voluptas. Suscipit non hic sapiente voluptatem maxime sed. Blanditiis cum modi commodi voluptas modi. Mollitia commodi cum voluptate dignissimos odit asperiores cupiditate. Itaque deleniti a. Nihil quasi earum ipsam. Ullam natus tempore eius quam. Possimus voluptates quaerat.

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