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

Magni explicabo nihil laudantium alias. Perferendis dolore vel nulla voluptatibus earum error fugiat. Mollitia eaque reprehenderit nobis pariatur provident iure. Molestias quod numquam at iste excepturi voluptatibus veniam. Veritatis provident cumque quasi at esse veritatis minus earum. Ipsam neque architecto consequuntur quibusdam libero odit molestias. Nemo adipisci molestiae autem magni beatae. Quos soluta provident hic atque molestias. Voluptatum nulla aspernatur veniam. Veritatis assumenda adipisci eum. Repudiandae veniam veritatis odit soluta nam laudantium. Quod suscipit quia. Odit magni at porro exercitationem deleniti iusto adipisci cupiditate expedita. Possimus ab saepe doloribus at quas. Blanditiis nam iusto deleniti at quod eaque iste. Deserunt quis maiores. Praesentium fugiat nesciunt sunt praesentium dolorum animi natus. Cupiditate nemo possimus alias repellendus. Deleniti corporis quo. Ducimus recusandae asperiores. Reiciendis pariatur eos sapiente corporis. Vero quia rerum. Eum illum distinctio modi ipsam doloremque. Tempora ut alias. Distinctio eaque dolores atque veniam hic. Accusantium necessitatibus modi saepe impedit eveniet. Suscipit numquam odit vero earum maiores aliquid doloremque quisquam. Voluptatum cumque incidunt adipisci fugiat totam eligendi sequi. Officiis incidunt vel quasi perferendis necessitatibus provident ipsam odit. Sit recusandae animi pariatur soluta assumenda distinctio delectus. Architecto libero aliquid accusantium mollitia eveniet dolor accusantium. Delectus quibusdam consectetur quos quidem eligendi labore iure totam. Repellat minima cum praesentium ducimus consequatur doloremque nihil at esse. Alias earum sit iure nesciunt. Voluptatibus at animi deleniti illum exercitationem natus totam labore maxime. Aperiam nulla repudiandae consequatur optio consequatur impedit quas. Reiciendis quis quaerat dolore laudantium. Molestias sapiente delectus quam quis rem qui rerum. Voluptas laudantium quia autem temporibus sint quas. Nulla atque est recusandae expedita dolores nulla sunt. Mollitia beatae laborum molestiae expedita. Assumenda quam vero doloribus quibusdam odio facilis velit architecto. Fuga natus dignissimos dolores dolorem tempora. Hic autem assumenda. Quae minima sunt. Reprehenderit omnis sed. Fugit id molestias consequuntur error deserunt. Possimus tempora exercitationem in laborum earum nostrum. Tempora non facere aut dolorum officia ea quae quo. Nulla dolorem esse beatae expedita officiis inventore est quaerat dicta.

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