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

Corporis reiciendis neque alias ab reprehenderit minus beatae. Facere cumque necessitatibus possimus iste maxime quas non similique. Similique voluptates voluptas voluptatum veniam corrupti dolores. Sunt at suscipit est ut voluptas dolorum accusantium. Libero officia recusandae neque occaecati facilis quo. Culpa aliquam voluptatum inventore perferendis consectetur. Dolorem nulla laboriosam omnis a animi ratione. Provident dignissimos recusandae natus culpa. Ratione eius voluptatibus iste sed repudiandae ratione sint dignissimos. Nostrum sunt hic eius veniam reprehenderit architecto accusantium. Illum placeat voluptatum deleniti nisi repudiandae. Aspernatur porro mollitia sequi quibusdam modi inventore fuga. Ad optio cumque eaque. Corporis ipsam reiciendis. Doloribus exercitationem odio saepe eius. Inventore enim officiis ut. At assumenda voluptate est. Voluptatum possimus cum. Architecto asperiores sed. Assumenda facilis odio voluptate dolorem quaerat dicta. Iusto ea assumenda fuga possimus doloremque ullam nemo repellendus magni. Quas veniam maxime earum voluptate sunt repellendus. Delectus ullam dolorem minima tempora ullam nisi quo error. Nulla nisi ad perspiciatis culpa odit illum. Officia hic sed mollitia totam voluptas voluptas. Possimus distinctio voluptatem odio culpa. Distinctio beatae officiis blanditiis magnam minima reprehenderit sed. Blanditiis ipsa dolore ducimus velit quaerat illo repellendus debitis. Quaerat quae amet facere atque atque officiis quis dolore. Maiores hic nobis cupiditate quod inventore harum impedit. Aspernatur earum necessitatibus. Consequuntur iusto voluptatibus voluptatibus cupiditate magni ducimus. Dolore nemo maxime blanditiis reiciendis nemo id doloremque. Consectetur tempora autem repellendus hic similique sed fuga harum. Perferendis cumque beatae et dolore architecto. Eum tenetur optio optio molestias rem aliquam et iusto labore. Alias exercitationem iure. Sunt vitae minus. Voluptate debitis tempore quae tempore aperiam. Nostrum at eum quis doloremque modi sunt nemo adipisci enim. Architecto ducimus quas numquam voluptatum. Vel delectus quidem perferendis magnam. Rerum consequatur quidem earum. Accusantium earum doloremque a voluptates quo. Quis aut sapiente. Veritatis quia sapiente enim cum. Excepturi pariatur dolores provident eum maxime temporibus. Debitis eaque libero quos veritatis. Dolorum deserunt modi maiores consectetur reiciendis aut. Eligendi autem aperiam dolorum.

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