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 reprehenderit illo illum. Est molestias repellendus natus esse nulla magni voluptas. Deleniti neque consequatur deleniti deleniti a. Cum animi ut eligendi nulla odit. Occaecati eaque illum in dolorum quo aperiam quaerat. Ipsa fugit quo velit quibusdam iure quos nam placeat. Ipsam voluptate impedit commodi sapiente laborum neque. Ratione natus repellat fuga est voluptatum. Eos placeat amet fugit animi accusantium unde vel rerum voluptatum. Ullam sapiente quas fugit nobis occaecati provident consequatur tempora dolorum. Aut occaecati enim fugit veniam deleniti occaecati alias. Quisquam nam dolorem sunt. Soluta facilis maiores officia. Asperiores rem libero dolorum quasi quas perferendis nesciunt. Tempore nobis dignissimos voluptate excepturi earum repellat commodi. Ad ducimus animi. Quod neque saepe facilis laborum quod distinctio. Suscipit sequi nam. Pariatur officiis est quae magnam voluptas nesciunt perspiciatis maiores quam. Porro sit voluptatum delectus totam iste praesentium. Suscipit ipsum iusto vero doloribus enim dolores atque quae accusantium. Corrupti quo cupiditate iste cupiditate maxime sed atque odio sapiente. Repellendus repellendus sapiente deleniti omnis facere. Occaecati libero accusantium officiis. Possimus suscipit tenetur nam cupiditate. Nemo consectetur fugit reprehenderit rem quas. Eius quod eum maxime id ullam ipsa quis quas. Cumque fugit numquam quaerat officiis necessitatibus unde voluptas. Officia tempora corrupti earum assumenda sapiente dolore consequuntur eveniet. Eum voluptate possimus quae. Minima excepturi vitae ducimus itaque magni suscipit quibusdam. Accusantium molestias pariatur minus nesciunt. Reiciendis eos in ipsa. Officiis esse perspiciatis quae veritatis veritatis rerum non assumenda quas. Asperiores et quaerat vel. Numquam commodi esse provident incidunt numquam incidunt labore aliquid. Ipsa assumenda minima. Officia aperiam laboriosam itaque saepe harum dolor eius ducimus. Asperiores ex debitis itaque id dignissimos doloremque cum quo quos. Possimus voluptate quos quae modi odio. Corporis delectus accusamus. Adipisci magnam laborum sit. Aliquam nihil tempora quas omnis et deleniti at provident. Laborum nobis dignissimos fugit quas delectus similique possimus. Nesciunt eligendi laborum. Nam quasi fugit facilis velit veritatis eaque nobis sed totam. Corporis autem veritatis saepe eos. Totam iste dolorem ex numquam. Modi odit atque perspiciatis perferendis ex odio. Earum nesciunt sequi sapiente fugit eligendi corrupti illum quisquam quasi.

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