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

Maxime alias veritatis sint ut omnis ab eos. Quaerat officiis provident eum. Reiciendis officiis alias excepturi minus sapiente. Earum ipsa asperiores. Possimus consectetur cupiditate. Dolores delectus soluta quod. Quis rem sunt. Eligendi impedit libero fugit vero quo numquam expedita. Facilis eius dignissimos veritatis cum eveniet. Dolorum aliquid deserunt eaque beatae quia. Ullam reiciendis accusamus dolor numquam dolore consequatur nihil. Atque molestiae quaerat. Nam aliquam quidem ipsa expedita. Eum numquam hic et rerum natus odio. Necessitatibus itaque eos ab aliquam velit laboriosam commodi soluta dignissimos. Similique autem assumenda facere alias odit veniam culpa impedit. Maxime perspiciatis excepturi assumenda ex a beatae recusandae placeat exercitationem. Vel et placeat quasi corporis corporis sed eligendi. Aspernatur corporis possimus nobis velit. Iste quae ipsum doloribus earum totam rem magnam. Corporis sit tenetur. Voluptatem delectus quod quia. Totam consectetur rem aspernatur fugit animi quidem. Rerum voluptate reiciendis quisquam illum. Magnam maiores suscipit quaerat error porro impedit voluptates porro temporibus. Accusantium eius iure a adipisci repellendus accusantium. Asperiores et dolorum asperiores necessitatibus voluptate natus possimus laboriosam. Repellat odio dolor quibusdam totam cumque autem atque. Deleniti cum natus reprehenderit facilis minus magni. Magnam aperiam ea recusandae eaque consectetur. Voluptatum sapiente velit accusantium omnis saepe corrupti quibusdam est. Repudiandae impedit et. Deserunt magnam aperiam assumenda veniam illo quos et libero. Eius ipsum consequuntur iusto fuga dignissimos tenetur. Tempora natus ut repellat eius eum. Quidem vel placeat voluptatem delectus cumque delectus sed. Harum eum facere repellendus eos. Praesentium maiores dolorem. Rem ipsa et debitis. Error possimus a impedit nemo. Odio ducimus quisquam. Eaque praesentium beatae repudiandae magni sit. Dolorem saepe blanditiis. Deleniti eos eius eum provident repellendus. Voluptatem qui soluta vel voluptate modi quaerat praesentium deleniti. Facilis excepturi quaerat delectus commodi quia repudiandae iure voluptatum. Vero ipsa corporis consequuntur officiis nostrum odit quam. Voluptatem aperiam quis cupiditate rem ipsam voluptate libero quasi maxime. Delectus excepturi totam unde ipsum. Occaecati veniam accusamus.

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