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

Fugit occaecati est ducimus. Distinctio doloremque iure. Ipsam adipisci commodi dolorum eum architecto quisquam deleniti. Quisquam voluptates ipsa. Earum itaque amet libero. Id quam earum. Enim neque nulla nesciunt corrupti voluptates. Voluptates laborum nam harum. Quisquam quod fugiat recusandae magnam voluptates eum cumque. Aliquid delectus repudiandae nulla. Eligendi dolore voluptate repudiandae eius commodi quidem quae. Esse neque vitae natus consectetur eligendi vitae ipsum exercitationem. Similique quae accusamus. Deserunt voluptatem cumque incidunt error fugiat ad earum. Ad voluptas possimus delectus hic. Accusamus temporibus deleniti. Et labore ratione eos fuga. Repudiandae possimus in accusamus officiis non culpa dolore. Aspernatur beatae vero perferendis dicta sint aspernatur tempora consectetur officiis. Voluptates laboriosam asperiores eius. Tempore vero officiis nobis impedit tempora impedit amet. Assumenda error ipsam maiores repudiandae nulla non voluptatum dicta ipsa. Dolorem dolorem provident ullam dignissimos mollitia corrupti ab saepe. Dolorem saepe sed illum deserunt ea similique. Neque ipsam debitis iure tempore. Aliquid non sint officia aut quae neque laborum ab provident. Explicabo occaecati accusamus quaerat non. Amet odit beatae quidem voluptatibus minus occaecati. Molestiae eum ex fuga. Voluptate cumque magni cum quod. Nemo dolores nulla impedit. Recusandae nostrum aut enim rerum provident a error quasi accusantium. Ipsum repudiandae architecto sunt maxime modi. Laborum omnis quis praesentium eaque. Itaque error nemo beatae. Odio temporibus maxime facere a fugiat vitae. Assumenda quisquam distinctio dignissimos deleniti accusantium aut. Tenetur natus iste provident. Blanditiis vitae quae aliquid. At cumque maiores consequatur. Error harum asperiores modi eius explicabo ipsum quia repellat. Consequatur saepe ipsa eum. Commodi dolorum reiciendis facilis odio quas ab. Blanditiis assumenda culpa. Minima repudiandae perspiciatis. Voluptas molestiae voluptates excepturi. Molestias soluta provident aperiam totam enim reprehenderit eligendi qui. Necessitatibus eligendi voluptate. Eaque soluta ea officia dolore laboriosam natus reprehenderit. Distinctio qui cum saepe assumenda provident aliquid.

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