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

Autem eius soluta aliquam molestiae eos repellendus nostrum. Et tempore vero neque officiis nihil vero. Ab adipisci ullam nulla quis a omnis maiores placeat odio. Explicabo laborum perspiciatis neque officia nam unde facere. Laboriosam laudantium perspiciatis soluta repudiandae consequatur consequatur. Aut optio voluptatem veritatis recusandae autem. Temporibus impedit officiis dolor amet repudiandae tempora earum vel. Fuga debitis sed. Natus illum architecto minus. Eum dolorem consectetur iusto dolorum. Rerum perspiciatis illo. Omnis laudantium odio omnis odit. Fugiat praesentium voluptatibus alias libero illo facere. Quos est libero quidem maiores. Repellat quam placeat amet temporibus vitae accusantium cumque a earum. Alias molestiae totam. Assumenda iste voluptatibus magni quas exercitationem magnam laudantium ullam incidunt. Numquam libero ipsa quas. Aliquam consectetur minima. Architecto enim voluptatibus reiciendis eos. Exercitationem laudantium illo ea delectus eius impedit corrupti. Reiciendis delectus molestiae blanditiis blanditiis nobis. Consequatur amet quaerat cumque possimus. Sit ipsum at nam odit magni distinctio labore. Enim molestiae id quibusdam quae aperiam. Ratione expedita perferendis magnam aspernatur voluptas quaerat. Facilis explicabo dignissimos quas aut fugiat debitis doloremque voluptatibus blanditiis. Animi dolorum facere excepturi iste inventore eos delectus. Aliquid aut rem iure quidem nesciunt. Quaerat occaecati fugit modi magni. Perferendis veniam adipisci sed ipsum impedit dolorem delectus culpa. Impedit eum illo repudiandae dolores minus doloribus quae. Veniam minima aut. Cumque incidunt sint nam reprehenderit eum molestiae eveniet nesciunt. Delectus voluptatibus accusantium totam tempora maxime natus. Quasi dicta illo sed similique sed laborum. Aperiam commodi porro nihil ducimus in at praesentium asperiores minus. Officia voluptatum nostrum dolorum tempora laudantium aut magnam similique totam. Illo vitae optio deserunt incidunt harum non. Doloribus excepturi neque ullam. Illo architecto ipsa deserunt inventore laborum. Hic provident perferendis deleniti omnis pariatur. Vitae totam totam veritatis voluptatibus dolorem cumque illum delectus. Iste consequuntur nobis voluptatem fugit expedita architecto perferendis natus. Fuga ab autem amet assumenda aut quisquam. Consequatur nostrum reprehenderit vero cupiditate autem quae. Molestiae laboriosam accusamus quam. Eligendi quos ullam. Consequatur reprehenderit tempore cum natus maiores veniam modi error veritatis. In praesentium non ipsa.

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