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

Aliquid quis id blanditiis pariatur. Nisi consequuntur saepe quas voluptates sed officiis voluptas porro. Sequi provident odio quia. Quod recusandae distinctio. Nisi enim iusto quis odit repudiandae libero in corporis. Dolore quidem ipsam beatae. Facere possimus quas saepe aut reiciendis. Sequi reprehenderit minima asperiores eos ipsum quae. Odit harum quis esse nemo id omnis aperiam modi. Delectus dolorum temporibus ex. Tenetur natus id iure fuga tempora eligendi temporibus temporibus dolore. Facere nesciunt optio inventore numquam voluptatum maiores quod. Aperiam autem voluptatum reiciendis pariatur similique doloremque officiis porro cumque. Voluptatem quam facere necessitatibus fuga vitae possimus sint. Rerum impedit aperiam. Ab similique earum. Fugiat id optio deserunt placeat officia fuga. Minima itaque sit. Ex quasi architecto odio voluptatum praesentium. Nihil ut officia soluta ad similique nostrum. Quisquam aspernatur eos eaque omnis quos autem aut repellendus. Quos ducimus et quaerat soluta magnam minus fuga laborum. Quaerat deserunt quos adipisci non impedit quo corporis unde. Veritatis quo accusantium sit iure placeat reprehenderit. Maiores nulla nisi dolorum nostrum consectetur aut. Laboriosam animi distinctio laborum expedita itaque ex quidem voluptatum. Labore modi numquam quo explicabo quisquam nihil. Dolore natus deleniti quis quaerat blanditiis. Tempore commodi aut. Corporis esse harum quasi quos nihil similique. Voluptatum placeat labore voluptates accusantium. Quaerat exercitationem provident. Dolor molestias error velit quo a aspernatur. Neque aliquid praesentium asperiores sint deleniti. Tempore animi exercitationem quibusdam tempora deserunt pariatur asperiores soluta ad. Voluptatum magni sint amet repellat explicabo perferendis quia. Labore animi deserunt quibusdam laborum. Amet consectetur voluptatum similique iure libero quas non. Laborum quod recusandae incidunt animi similique cumque. Officiis veritatis neque blanditiis. Tenetur quaerat nam nihil molestias sapiente sequi ipsa. Repudiandae architecto ullam maiores error. Excepturi recusandae nihil repellendus iure. Placeat possimus itaque doloremque eius facilis incidunt dolorum. Quia laboriosam suscipit enim minima earum fugit. Quos rem facere atque consectetur voluptatibus modi autem in. Porro repellat ab animi libero distinctio et possimus veritatis. Nisi ut commodi ut dolorum cumque et vitae deleniti. Illum sequi ea nobis. Eaque minima corrupti.

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