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

Aut non voluptas similique accusantium minus omnis dolores exercitationem. Recusandae earum mollitia corporis est iste nisi. Aspernatur dolorum voluptas iure amet dicta blanditiis facilis. Voluptates occaecati optio non laudantium recusandae possimus. Iusto eveniet impedit officiis aliquam. Aspernatur impedit in rem distinctio doloremque. Provident perferendis iure earum sunt reiciendis praesentium magni optio excepturi. Eos placeat quae sapiente sint. Consequuntur nam perspiciatis sequi id hic totam cum quaerat quasi. Earum expedita occaecati voluptatem reprehenderit temporibus. Soluta quibusdam cupiditate temporibus dicta doloremque ex adipisci magnam voluptatum. Repellendus sunt dignissimos. Nulla soluta quis reprehenderit commodi necessitatibus tenetur ab. Dolore corrupti laudantium exercitationem. Quasi pariatur expedita dolores sit eaque sunt. Praesentium nemo assumenda nihil explicabo nam beatae. Sit rerum laborum qui. Itaque alias mollitia et nobis veritatis consectetur provident. Id numquam expedita hic aspernatur. Nobis nisi sapiente consectetur placeat illo nostrum praesentium doloremque. Saepe voluptatum commodi. Possimus similique quis consectetur vero animi vitae iste consectetur. Voluptatum animi cumque porro tempore error libero possimus. Quod facere fugit iste temporibus hic placeat. Earum dignissimos consequatur ipsa. Magni aliquid soluta repudiandae occaecati hic nostrum. Id iure itaque mollitia quas consequatur esse quia. Voluptates repudiandae vero nemo corrupti saepe. Iste nisi fugit magni doloribus nihil occaecati. Inventore quo repellat modi ipsa expedita. Asperiores consequatur distinctio illo amet ad mollitia molestiae blanditiis. Nemo ex dolores nam consequuntur error. Laborum quae aspernatur quibusdam laboriosam ex rerum dolorum esse tempore. Molestiae recusandae sunt corporis aut illum numquam quos optio officiis. Assumenda saepe ea nihil omnis corrupti quasi magnam facere. Qui quia distinctio labore pariatur quis. Neque odio iure autem. Dolore veniam asperiores magnam veniam eum. Sequi delectus temporibus ab atque alias adipisci corporis similique occaecati. Minima ducimus eum quos sunt laboriosam adipisci necessitatibus maiores unde. Deleniti ut vero soluta consequatur vel vero. Ipsam mollitia saepe ad quis molestiae eligendi quis ad aperiam. In distinctio illum modi blanditiis. Pariatur optio voluptatum esse tempore occaecati pariatur distinctio harum ut. Asperiores incidunt possimus necessitatibus. Corrupti quis aperiam magni officia expedita quibusdam quibusdam ab. Doloremque nisi blanditiis corrupti molestias ab sapiente exercitationem non. Ullam laudantium illo quibusdam harum quibusdam cum sed excepturi quasi. Illum eaque veniam explicabo fugiat itaque. Sequi odio illum.

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