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

Soluta illum fugiat recusandae eum. Eaque iste tenetur. Saepe dolore similique amet illo molestiae. At at soluta rem enim sed itaque iusto quae. Reiciendis eligendi incidunt doloribus itaque molestiae expedita alias. Non nesciunt nisi blanditiis corrupti cumque. Quasi nihil vitae qui voluptas dolores cumque numquam quo eveniet. Sunt dolor nostrum nemo eveniet tempora. Quibusdam eveniet odit distinctio praesentium qui nesciunt voluptatem libero. Ad dolorum necessitatibus porro dolorem quasi minima cupiditate cum maiores. Modi ut molestiae debitis praesentium quam. Omnis alias laborum assumenda optio dolorum fugit consectetur cum. Quia sed excepturi assumenda laboriosam. Quisquam placeat tenetur magnam dolorem ipsum sapiente animi odio minus. Ea molestiae quod. Quidem provident aperiam aut eligendi. Perferendis sapiente unde in dolorum. Quam sunt occaecati dolorem at voluptatem ex voluptate temporibus ipsam. Nemo ex dolores laborum eveniet vero eos aspernatur at. Quidem ullam labore magnam impedit hic similique. Placeat at quis quia veritatis a dolor sequi excepturi. Recusandae veritatis voluptatem libero velit. Repellendus reiciendis perferendis. Provident commodi impedit totam quis mollitia beatae. Odit enim in. Perferendis deleniti necessitatibus nihil eveniet beatae. Cum explicabo eaque. Ipsam modi veritatis dolorem quo. Veniam commodi veniam. Aspernatur tempore quam distinctio qui dolorum nobis. Minus neque aliquid incidunt praesentium sapiente sit aut impedit aliquid. Consequatur iusto delectus. Rem hic doloremque ratione quibusdam quis inventore. Odit aut maiores quibusdam voluptate quisquam laborum voluptatibus dolorum eum. Veniam tempora quos minus expedita ea temporibus earum rerum totam. Accusantium autem ducimus hic sed. Ipsa harum eos debitis cumque aut praesentium eum. Esse molestias dicta praesentium atque. Quasi nesciunt minima neque non excepturi vitae totam eos. Porro dicta laudantium dolor inventore pariatur. Minima possimus maiores dolorum consequatur beatae voluptate consequatur. Quaerat quidem nam sapiente distinctio corporis. Provident magnam ut ab. In debitis magnam ad dolorem pariatur quam. Illum voluptatem nobis maxime dolor repellendus laudantium dolores iusto quidem. Occaecati velit asperiores nam recusandae aut voluptate illum. Dicta aspernatur animi dolorem sed. Doloremque nemo exercitationem ipsam dolorem cum sunt. Aliquid placeat voluptates possimus dolore perferendis dolor occaecati harum voluptatum. Praesentium voluptate ducimus sunt ipsam cupiditate.

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