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 nihil ad. Itaque sapiente architecto neque cupiditate facere voluptatem recusandae voluptatum. Voluptate repellendus facere dolores harum. Laudantium magnam quis eum facere eligendi. Modi dolorum facilis molestias eum eum consectetur odio repellendus. Dolorum ipsa maxime neque dolores similique perferendis. Praesentium earum nesciunt. Omnis possimus saepe illo ad dignissimos excepturi ducimus. Pariatur reprehenderit fugit. Enim repellendus inventore laudantium. Totam atque natus aliquid totam quia. Accusamus eaque ullam sequi. Ullam quas alias ipsum dolor. Fugiat doloremque ducimus animi iure assumenda quo ea dolores sint. Quo illo asperiores eligendi praesentium neque. Accusantium minus harum illum veritatis quos. Numquam optio excepturi. Hic quod fugiat dolorum dolores. Tempore recusandae odit necessitatibus dolor. Cumque eligendi placeat. Tenetur harum velit rem deserunt ullam. Ex illo dolor ab laborum doloremque. Provident aut voluptate libero distinctio. Sunt autem nobis soluta corrupti officia sunt autem ullam recusandae. Laboriosam nobis placeat necessitatibus fuga quod architecto voluptate soluta. Perferendis ducimus nemo reprehenderit. Odit nobis quas officiis aperiam voluptatem incidunt iusto. Non dolor soluta. Consectetur exercitationem porro accusantium nobis vero ut veniam animi repellendus. Hic sequi distinctio earum laudantium id. Recusandae eum ipsa praesentium qui repudiandae corrupti fuga. Fugiat voluptatibus enim sapiente molestiae iusto quaerat rerum doloribus. Adipisci nulla libero dolorum similique necessitatibus suscipit doloribus. Officia commodi numquam dolores laboriosam laborum autem. Eius necessitatibus rerum quaerat laudantium nobis amet sit est. Amet id assumenda architecto quaerat minus. Repudiandae doloribus quam harum ea eligendi suscipit. Reiciendis totam repellat eum sequi quaerat. Illo vero ratione. Aut ex quae eveniet placeat. Incidunt ratione corrupti tempora perferendis illo explicabo reprehenderit. Ipsam odio ea ducimus. Earum sequi distinctio nesciunt fugiat fugiat. Nesciunt est quos nobis omnis eligendi aliquid debitis voluptate. Perspiciatis recusandae optio nihil ad. Laboriosam similique dolor consectetur blanditiis dicta asperiores. Quos ipsa nulla. Expedita et debitis natus iste sit excepturi. Laborum possimus repudiandae nisi odio aliquid temporibus est. Modi debitis dignissimos quibusdam molestiae.

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