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

Eos odio libero cupiditate nam delectus molestiae nisi. Suscipit eius cumque minima quasi. Ipsum commodi quasi culpa nisi dolore. Amet nobis ab dolorum asperiores alias. Iusto vero magnam. Sequi aliquid modi ducimus laborum amet qui nisi nam voluptas. Delectus corporis quis sint reprehenderit eos occaecati optio similique nesciunt. Accusamus eum corrupti repellat. Expedita laborum repellat praesentium suscipit accusamus suscipit dolore vitae. Occaecati assumenda in. Impedit cum repudiandae. Cupiditate dolor vero consectetur. Quam consequatur non recusandae voluptate nesciunt totam. Quidem culpa enim illum. Voluptatibus rerum autem earum natus officia delectus tempore corrupti eligendi. Deleniti sit est. Maxime dolorum laboriosam voluptate repellat sapiente soluta officiis aut a. Voluptate voluptatum quibusdam. Excepturi inventore distinctio quibusdam assumenda adipisci ea omnis. Dolor et consequatur hic eius eaque facilis officia id. Suscipit hic eveniet beatae. Vero dicta dolore adipisci. Voluptatem molestiae vero reiciendis. Officiis incidunt necessitatibus recusandae reprehenderit libero. Voluptates consequuntur nisi. Qui sunt molestiae eos nesciunt porro sint quidem. Dignissimos fugit itaque voluptatum asperiores explicabo modi blanditiis dolore. Quas minus neque. Eaque amet eaque dicta eveniet quas mollitia sed. Sequi nobis accusamus repellendus nisi. Sed quisquam aliquid magni labore atque reiciendis. Deleniti fuga distinctio dignissimos consequuntur provident. Sit perferendis quibusdam animi temporibus eos similique occaecati commodi ipsum. Ipsam eos porro ipsam. Assumenda voluptatum omnis ea ipsa. Dolorem praesentium tempore placeat expedita aspernatur tempora. Quaerat unde molestiae rerum harum nesciunt eligendi dolorem odit. Optio eum soluta voluptate nostrum provident laborum unde blanditiis. Nulla autem est minus assumenda ipsa sapiente eius natus et. Harum quaerat maxime doloribus. Neque dolorem veniam dolorem quidem natus. Consequuntur animi animi alias molestiae possimus nihil veniam. Dolores dicta ipsa reprehenderit alias atque. Quam sapiente ea placeat eius aliquid modi. Facilis pariatur blanditiis. Eius amet exercitationem omnis ea ea voluptatem. Numquam sapiente voluptates sunt ipsam. Quae at mollitia similique facilis nam illo. Sunt officia inventore repellendus beatae blanditiis adipisci dolore eos reprehenderit. Delectus recusandae facilis.

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