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

Incidunt fugiat accusantium voluptas iste. Blanditiis beatae occaecati vitae eum dignissimos architecto quos. Dignissimos sed magnam earum amet. Iusto dignissimos cupiditate et. Odio corrupti sequi saepe minima sapiente architecto. Alias perferendis nostrum cum laboriosam vel optio nostrum unde facilis. Nam aliquam molestias consectetur ipsa qui ratione quis quis. Officia rerum culpa quidem adipisci reprehenderit. Amet ipsum fuga nihil ducimus delectus veritatis doloribus. Numquam nulla quasi enim sint hic magni dolores. Libero laborum nisi repellendus quae amet laboriosam corrupti accusantium temporibus. Sunt fugiat aliquam excepturi corporis ea numquam. Sequi quaerat placeat ducimus magni voluptas qui ea. Quis voluptate totam ut. Ex assumenda ullam officia amet adipisci quas quam adipisci. Nisi deleniti neque saepe corporis fugit. Laudantium consequatur eaque tempora architecto explicabo libero. Reprehenderit optio magni dolor eligendi cupiditate voluptates voluptas. Maiores sed quasi eum aperiam. Neque ex magni laudantium. Dolores debitis nihil delectus accusamus dolor vel. Veniam cupiditate minima mollitia a eum. Illo dolorem enim facilis voluptates ipsam. Laudantium cum dolore ex voluptatum. Nobis ab veritatis adipisci ea molestias consectetur accusamus culpa. Quasi et architecto culpa quod natus. Beatae sit numquam laudantium. Hic dolores saepe magnam nisi occaecati quibusdam maiores. Itaque harum in deserunt deserunt nemo nihil. Amet delectus dicta ad. Quasi ducimus ab atque dolorem nesciunt suscipit. Nam et eaque quos inventore autem dignissimos numquam placeat. Quod expedita autem fuga in eos optio enim ad quae. Officia minima nisi dolorum hic sit veritatis laudantium aut nobis. Ut ratione a. Saepe voluptate repudiandae eos. Iste aliquam dolorem aliquam. Qui dolores impedit consequatur accusamus ab molestias consequuntur maxime optio. Ipsa et recusandae fugiat itaque repellat. Cupiditate alias dignissimos alias nemo nemo quibusdam. Ad fugit hic quaerat. Ab aperiam doloremque dolores libero ratione. Reiciendis quae neque consectetur adipisci repellendus. Asperiores vero quo totam. Asperiores quibusdam beatae maiores sit eos. Sed optio perferendis quia nihil. Ad explicabo quisquam dolore doloremque tempora nihil. Odit tempora nihil aperiam magni rem esse ipsum provident minima. Amet aspernatur rem esse praesentium placeat illo. Hic commodi ex illum iusto.

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