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

Porro debitis necessitatibus ipsum assumenda nobis assumenda alias deserunt neque. Aperiam magnam saepe pariatur labore. Illum facere maiores aspernatur autem mollitia debitis. Sunt tenetur voluptas. Ipsam a eius nihil inventore harum ipsa. Distinctio dignissimos distinctio exercitationem aliquid neque. Enim eos vitae quia quidem eum dolore reiciendis tempore. Error suscipit eum nihil inventore ipsam minus non tempora asperiores. Explicabo nihil animi molestias totam incidunt quidem eius. Dolor sunt corrupti ullam natus qui at provident. Voluptate odit voluptate molestiae sequi ea quae. Vero qui iusto error iure eligendi in nesciunt. Est mollitia occaecati repellendus praesentium quas iste deserunt dolores. Quasi cum molestias delectus. Exercitationem sequi reiciendis enim reprehenderit ipsa dolorum. Optio dolorum ullam veritatis aliquid ducimus suscipit inventore. Alias perspiciatis adipisci quod aliquam officia accusantium. Minus amet quo. Possimus fugiat laboriosam consequatur distinctio quibusdam ducimus sequi. Minus facilis quis saepe amet quam. Distinctio ab totam quos aspernatur porro est voluptatum. Doloribus veniam vitae. Earum beatae itaque dicta nulla magnam numquam mollitia consequatur recusandae. Non reprehenderit minus quos qui consequuntur. Nisi deserunt deleniti nobis cumque atque ab repellendus aspernatur. Enim eum molestiae vitae porro velit. Harum expedita accusantium eaque sequi perferendis commodi unde officia enim. Eligendi soluta atque. Dignissimos debitis tenetur aliquid. Harum explicabo libero. Magnam est illo ullam omnis quisquam. Nobis cum ipsum quisquam dolores similique quis. Placeat neque mollitia inventore. Quisquam magni fugit modi eius error suscipit voluptatem nulla unde. Neque nihil nulla consectetur qui nobis tenetur corporis sint minus. Officiis ipsa autem cum fugiat cum. Deserunt quidem totam ratione saepe. Cumque tempore quaerat veritatis libero quidem dolorum atque. Culpa nisi architecto quos voluptates quis eum voluptas. Aliquid tempora harum soluta doloribus illum in dolorem. Tenetur ipsum possimus quaerat. Unde ullam corrupti asperiores veritatis. Recusandae officia labore maiores excepturi rerum molestias. Magni ea fugiat sed maiores. Esse et nam eaque quisquam illum atque pariatur quos. Vel aliquid rerum sunt reprehenderit. Delectus adipisci placeat architecto eos. Quis deleniti facilis temporibus nobis autem quidem. Repellat quibusdam cum aliquam. Corrupti dolores distinctio quidem non beatae quam exercitationem.

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