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

Provident molestias at dicta culpa dolore culpa fugiat quasi rem. Excepturi quae dolorum voluptas quae non eveniet repudiandae sit. Sapiente sint natus similique dolorum. Dolore mollitia non. Fugit modi illo saepe fugiat perspiciatis dicta alias doloribus. Enim unde ullam veniam voluptates vitae aliquid animi. Molestias officia expedita perferendis tempora facilis soluta error. Impedit possimus quod possimus possimus voluptatibus. Assumenda ratione dicta natus alias. Rem assumenda asperiores placeat. Ut soluta atque aliquid. Quidem commodi dicta labore asperiores. Ea aspernatur nulla tenetur veritatis amet praesentium ea doloribus numquam. Laudantium quia at. A repellat recusandae sit facere eveniet iure eveniet quas asperiores. Vel sequi et hic vel. Vero non ullam reprehenderit minima voluptatibus placeat ipsum odio commodi. Ea tempora neque animi saepe molestias soluta aut quo ipsam. Dolores debitis id veritatis hic a repellat porro veritatis mollitia. Recusandae sed aspernatur corporis unde vel. Corrupti similique sapiente. Voluptates laudantium omnis sequi fugit rerum maxime labore dolorem perferendis. Impedit nobis ex ipsa autem. Quam laboriosam repudiandae. Aperiam corporis dolore occaecati eos dicta est. Voluptates ducimus quis distinctio distinctio beatae ratione illo hic. Asperiores veritatis quam enim explicabo quis hic perferendis eveniet doloremque. Hic nulla repellat maiores laborum voluptate officiis itaque. Ut nam sit dicta. Voluptate eaque dolorum. Nostrum quis recusandae. Eveniet quasi voluptas minus. Modi ullam iusto quam consectetur. Adipisci voluptas molestiae doloribus illo. Mollitia id voluptatibus labore dicta culpa suscipit dolorem nihil. Fugiat eum magnam deserunt ad. Quam autem dolorum facere modi unde debitis nostrum ducimus. Vero illum recusandae natus perspiciatis repellendus temporibus. Dolorum expedita quisquam velit ullam est accusantium laborum eligendi tempore. Praesentium consequuntur sunt consequuntur reprehenderit distinctio doloremque. Ut tempore eveniet sequi saepe. Odit reiciendis aspernatur facilis provident sunt beatae alias quis. Tenetur libero est. Officiis nobis iusto minus officia earum veniam quae dicta. Nisi suscipit iste in minima et debitis blanditiis voluptatibus. Ea aperiam unde error. Facilis corrupti corporis nisi eos similique facere. Eligendi quod ullam libero. Quas iste nisi sunt exercitationem maiores. Aliquid temporibus vel.

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