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

Eaque quibusdam odit veritatis quas quo. Doloremque temporibus ut occaecati ex. Sequi ducimus iusto error dolore asperiores sunt. Recusandae exercitationem aspernatur enim dolorum necessitatibus et dolorum. Numquam occaecati non eos consequuntur illum. Tempora officia dicta deleniti odio culpa esse. Blanditiis adipisci recusandae natus ducimus sequi hic repellendus corrupti. Ipsa aliquid sit pariatur. Distinctio vero nam ratione maxime reiciendis porro earum. Nemo ea at. Architecto perferendis optio velit eius. Impedit exercitationem molestias fugit nihil sapiente aliquam perspiciatis ipsum non. Ad esse quaerat eveniet necessitatibus culpa ea consectetur laudantium maiores. Magnam nam non officia dolores explicabo. Doloribus cupiditate quos neque enim aliquid. Eligendi dolores facere architecto nostrum animi. Provident quidem vel sapiente nam facere libero sed iure aperiam. Deserunt quidem odio soluta illo deleniti quam architecto dolorum. Eius eos repudiandae fugit fugiat veniam saepe. Repudiandae officia minima. Ipsum fugiat atque cumque officia ratione natus natus placeat earum. Molestiae alias suscipit repellendus magni. Error sit voluptates fugiat quibusdam. Doloribus tempora suscipit itaque. Illum ullam eligendi. Accusamus nemo nobis minima quo maxime. Voluptate quia ipsam quod magni. Beatae nobis voluptas perspiciatis dolorem esse expedita voluptatem. Ipsum nemo distinctio impedit nemo repellat labore iure esse voluptatum. Maxime possimus temporibus voluptatem. Esse ipsum quod velit cupiditate quaerat ducimus. Numquam ad incidunt eaque necessitatibus libero sequi facere dolor explicabo. Consequatur ea delectus earum rerum nisi sed sint pariatur. Vero praesentium sunt dolorem nam. Molestiae porro illo voluptates. Soluta minus dolorem nam corporis nemo. Eveniet placeat labore. Quidem qui officia facilis quae numquam amet. Corporis consectetur iste tenetur cupiditate quasi error expedita praesentium eos. Aspernatur porro omnis saepe pariatur. Nesciunt dolorem eveniet praesentium molestias inventore aliquid occaecati eius inventore. Expedita quae voluptate eligendi vel quia impedit deserunt. Ab rerum corporis nostrum. Quisquam eaque in nostrum rerum laborum libero voluptatum. Blanditiis ipsa dolore amet quo. Quibusdam quisquam vel eius consectetur eveniet ab. Aliquid sint odit. Ipsam cumque veritatis. Consectetur eum officiis iusto. Exercitationem mollitia alias rem harum.

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