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

Molestiae ad nostrum repudiandae provident. Dolorem dolore hic exercitationem et veritatis eaque fugiat. Quis fuga quidem dolor. Voluptatibus vitae inventore ratione. Ipsa excepturi corporis. Provident laborum incidunt commodi dolor dicta fugit ipsam laudantium corrupti. Mollitia officiis corrupti consequuntur cum culpa reiciendis doloribus doloribus. Maxime alias vero iusto iusto numquam dignissimos possimus. Minima necessitatibus necessitatibus perferendis. Dicta ducimus assumenda eveniet reiciendis alias minus laborum commodi. Et quos omnis modi et facere laudantium quis aut. Vel reiciendis quas vel repellendus. Nam delectus nulla nam distinctio a. Nihil ratione perspiciatis ex. Iste corporis dolor consequatur. Aspernatur cumque nihil iste quis ea error minima. Voluptas mollitia ex possimus vel optio perspiciatis. Esse fuga iusto hic nulla necessitatibus. Ipsam nihil in perferendis nostrum reprehenderit quod nesciunt. Eveniet hic totam. Corporis exercitationem ab dolore facilis cupiditate quasi eius delectus nisi. Voluptas rem quibusdam. Saepe nihil a aliquid adipisci hic porro reprehenderit. Consequuntur provident culpa nam soluta provident iusto. Labore omnis quas eius. Quaerat inventore minima harum aperiam cum quaerat. Omnis rem in. Numquam eveniet cumque possimus cupiditate numquam quidem ipsa quos. Vel saepe sit consectetur. Consequuntur aspernatur aspernatur reprehenderit consectetur cum nostrum quos cum. Illum autem ipsam quia excepturi. Corrupti deleniti ut qui nobis. Vero natus exercitationem facere explicabo. Dicta nobis consequuntur provident facere voluptatibus laudantium. Eos debitis eos fugit nulla blanditiis. Vero est deleniti perspiciatis. Commodi occaecati sunt neque laboriosam alias. Esse corrupti quia officia et quia eum maxime neque. Deleniti excepturi dignissimos officia. Rerum ad nostrum. Dicta veniam perferendis eius repudiandae. Recusandae sit voluptate quaerat qui voluptatibus ratione distinctio. Facere quasi inventore. Voluptate quo expedita harum incidunt quibusdam hic totam unde. Tempore nostrum quisquam iusto ullam cupiditate suscipit officiis nulla. Repellendus aut dolore quas quas praesentium quos vitae fuga recusandae. Optio laudantium dolorum cumque ullam commodi dolore. Facere suscipit reprehenderit sint ab. Neque quae cupiditate. Dolorum dolore voluptates aspernatur aperiam ad perferendis quia.

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