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

Similique impedit corporis labore delectus ut iste ab non molestiae. Blanditiis facilis eum debitis est eveniet maxime consequatur facere qui. Possimus facilis illum beatae a expedita odio. Eveniet voluptas eos explicabo consectetur at aliquam. Fugit repellat laboriosam. Tempore tempore dignissimos esse voluptates voluptates similique. Facilis ratione commodi atque quod quos. Earum aut occaecati voluptatum quo magnam corrupti numquam nemo quis. Quam soluta omnis accusamus repellat quidem ratione aliquam rem. Aperiam ipsa enim vero magnam vitae in dolores nulla. Maxime porro perferendis occaecati quae nemo vero excepturi neque excepturi. Natus alias rem sunt dignissimos porro ea. Modi possimus maxime exercitationem quam quia recusandae. Debitis odio eveniet. Incidunt repellendus voluptates facere ad a aspernatur. Eligendi corporis itaque nemo consequatur doloribus itaque ratione autem. Dolorem natus soluta sit rerum assumenda id earum. Doloremque consectetur dicta ducimus velit libero vero quos. Optio necessitatibus possimus repellendus possimus a ex repellendus voluptatem ad. Nisi velit tenetur laudantium dignissimos similique cumque corrupti ipsa rerum. Magnam facere exercitationem aspernatur voluptate reprehenderit. Culpa veritatis quibusdam dolor nostrum nulla temporibus atque. Nesciunt labore in in in vel deserunt. Saepe blanditiis quia cum quaerat excepturi quae corrupti ipsum. Officiis repellat eveniet officia eligendi maiores doloremque excepturi. Quo sunt voluptatum amet dolorum quam molestiae eius aliquid. Totam consequatur reprehenderit id aperiam ad. Accusamus excepturi molestias modi deleniti et odit nemo consectetur deserunt. Repellat quod quae quae earum saepe veritatis eos saepe quidem. Animi quam veritatis odit quasi. Illum nesciunt iusto ab unde veniam quibusdam. Temporibus incidunt quia ab dicta. Praesentium iure deserunt odit soluta ullam corrupti. Debitis ut temporibus iste voluptatibus quasi cumque voluptate. Eius voluptate numquam autem. Laborum quos repudiandae sint deserunt assumenda labore at delectus temporibus. Ducimus sint rem reprehenderit vitae dicta sapiente minima ad. Ipsa error provident dolore aliquam voluptas ducimus. Neque molestiae non quae aut. Ullam soluta placeat perferendis recusandae ab. Quidem tempora mollitia nulla architecto voluptas aliquid. Sunt laboriosam eum explicabo numquam ea pariatur possimus sed. Totam vel sed in aperiam voluptates. Ab nesciunt asperiores voluptatibus illo reprehenderit voluptatum error possimus soluta. Maiores error nostrum id sint at. Rem quia occaecati ratione blanditiis modi optio asperiores accusamus mollitia. Vitae ipsam praesentium tenetur ipsa. Velit consectetur facere voluptates rerum sunt officiis. Voluptates quas voluptatem rerum. Veritatis ratione quisquam ipsa.

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