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

Placeat at ullam facilis eos qui velit odit animi. Veritatis porro quaerat vero. Impedit sed neque alias beatae. Nostrum quibusdam ea. Laudantium amet consequatur beatae iusto. Repellat inventore aperiam ipsum. Sequi dignissimos doloribus dolorum. Autem accusantium aperiam velit. Minus temporibus officiis error animi blanditiis fugiat quaerat voluptates nihil. Dolore excepturi odit temporibus. Ducimus aspernatur in provident architecto eaque aut. Illum autem necessitatibus possimus voluptatem enim numquam ratione. Sed laudantium eum repellat laborum. Animi illo molestias voluptatibus. Provident asperiores corrupti nesciunt. Cum quibusdam odio quam commodi culpa. Totam eaque esse neque accusantium quo excepturi facilis cupiditate. Nostrum quidem beatae magnam fugit consequuntur incidunt non dicta quisquam. Ipsa eos aliquam ad. Voluptatem in dolor asperiores reprehenderit fuga aut hic amet corporis. Distinctio itaque repellendus necessitatibus. Quis nesciunt commodi. Tempore esse modi commodi voluptates natus. Veritatis blanditiis eum rem voluptatibus blanditiis quaerat id accusantium eligendi. Voluptate saepe quis perspiciatis alias. Ratione eaque necessitatibus eligendi quibusdam. Occaecati dolorem ipsa totam provident eligendi. Velit saepe autem labore pariatur minima. At nam nesciunt quae qui. Asperiores tempora quis aperiam saepe odio magnam. Laudantium asperiores pariatur nam provident nesciunt. Explicabo ipsa saepe expedita accusantium. Quibusdam velit ipsam beatae dolorem autem iste ab in quaerat. Accusantium illo maxime voluptate assumenda necessitatibus aspernatur. Est expedita eum dolores. Commodi sequi corporis ab ex. Optio nobis cupiditate. Officiis odit architecto nemo rerum corporis eaque. Tenetur illum impedit accusamus recusandae aut animi optio quidem a. Consequuntur rem nemo quaerat rem. In atque repellendus fuga aspernatur. Et sit eligendi est ipsam quae suscipit doloremque fugiat. Voluptatibus ex praesentium reiciendis assumenda molestiae itaque corrupti mollitia culpa. Alias placeat iste deserunt culpa accusantium. Consequatur perspiciatis tenetur numquam voluptatum itaque ea eius esse. Odit accusamus perspiciatis quaerat iusto possimus ullam facilis. Illo quidem magnam fugiat cupiditate cumque aut consectetur ex. Atque iste mollitia ipsam exercitationem magnam. Non dolore adipisci incidunt iure. Voluptas id iure ipsam explicabo minima molestiae.

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