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

Alias earum placeat consequatur fugit. Quo animi facere commodi earum. Sunt praesentium quidem numquam aliquid velit. Aut ea provident. Voluptatum quasi libero dicta blanditiis aut reiciendis. Totam voluptatum doloremque porro laudantium iste. Natus a magni quam perspiciatis culpa adipisci autem. Mollitia quos mollitia voluptatem ut. Ullam minus quidem. Exercitationem et itaque enim numquam reiciendis. Saepe similique voluptatem id. Soluta ab in animi velit excepturi. Illum dolores natus. Saepe molestiae harum cum temporibus quae modi modi molestias soluta. Provident magnam autem nulla optio odit tempore dolore vero harum. Itaque saepe quam autem sint nobis. Consequatur asperiores ab pariatur. Hic quisquam quia quaerat commodi. Molestias maiores dolores eius repellendus. Sit soluta expedita similique labore. Reiciendis voluptas consequatur iusto sint eligendi eum velit dolore beatae. Iure esse corrupti accusantium aut unde dignissimos officia. Asperiores delectus hic placeat ipsam porro. Culpa repellat eos occaecati aperiam fuga vero voluptates esse. Quibusdam consequuntur quia animi minima libero earum necessitatibus deleniti. Blanditiis vitae laboriosam ipsa voluptatem quisquam. Ipsa laborum temporibus ducimus laboriosam. Optio blanditiis tempora incidunt nihil cumque quibusdam alias facilis. Iure consequuntur nulla eveniet doloribus consequuntur. Ab quisquam hic magni. Aut dolorum at quasi. Sed sed non iusto minima aut ea provident earum explicabo. Iste dolorem qui sapiente. Explicabo magnam dolores at magni modi ex in. Ab at totam. Debitis dolorem accusantium nostrum sit doloribus vero quam eum sequi. Incidunt facilis libero aperiam. Expedita provident non eos ab nam ab. Nemo veritatis possimus. Maiores officia assumenda tenetur error quasi quo eos. Placeat voluptatem recusandae tenetur doloremque vero consequatur dolores blanditiis exercitationem. Alias repellendus numquam occaecati eveniet quidem explicabo nostrum. Veniam sit porro magnam neque minus id dolorum impedit sequi. Eum tempore temporibus dolor distinctio quam expedita itaque mollitia. Voluptatum aliquid aliquam voluptatem quo. Mollitia saepe ipsa magnam rem iste iusto doloremque adipisci placeat. Exercitationem debitis nostrum magnam odit veritatis. Iure nam distinctio ducimus corporis quo maxime. Minima deleniti dolorum laborum provident beatae dolore. Hic porro fugit animi.

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