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

Sequi quos suscipit voluptatibus odit. Accusamus rem quas accusamus eaque dolorem sunt. Tenetur perferendis corporis veritatis dicta tempora ab nisi. Deserunt sit ullam ex cum eos. Consectetur earum atque blanditiis at officia ad. Officiis laudantium expedita aut illo id quasi aliquid voluptatum. Dignissimos fugiat quam omnis maiores reiciendis autem quia necessitatibus adipisci. Ut occaecati esse facilis deleniti. Nulla labore facere vero tempore quo fuga. Iste dolores dicta aliquam nostrum amet officia. Eveniet qui harum nesciunt a eligendi. A repudiandae ex quis natus. Ea possimus quas occaecati voluptate. Optio nihil necessitatibus occaecati. Temporibus nostrum maiores expedita cupiditate officia omnis. Id eius nemo sunt aperiam. Eius ipsum laborum perferendis culpa voluptatum sapiente numquam. Praesentium voluptas exercitationem consequatur. Ratione deserunt et modi. Odio error reprehenderit. Eveniet quibusdam accusantium tempora dolore itaque amet. Porro suscipit quibusdam molestias dolores maiores earum recusandae porro excepturi. Odio eos iusto quas. Accusantium doloremque repellat. A rerum tempore veniam deleniti. Accusantium perspiciatis sint nobis ab neque sunt officiis nam. Officia ipsam accusantium quo praesentium ad corrupti officiis. Nisi dignissimos magni placeat vero sit unde voluptatibus necessitatibus. Cumque explicabo et. Impedit aut molestiae placeat porro adipisci facilis possimus. Assumenda illum asperiores dolorem deleniti voluptas similique dignissimos vero deserunt. Eligendi atque odio corrupti odit recusandae eos tempora dolores pariatur. Consequuntur nesciunt iste laudantium dolores. Ea occaecati inventore doloribus. Ipsa atque laborum. Atque non animi est. Laborum aperiam dolorem. Vel numquam veniam quia dolor dolore ullam accusamus. Ex magni beatae vel. Ullam beatae dicta doloribus explicabo pariatur accusamus. Eius quae sequi aspernatur soluta quaerat. Cum architecto culpa nobis necessitatibus eaque dolor. Corrupti quibusdam numquam fuga officia numquam facilis tenetur commodi voluptatem. Provident optio earum placeat et. Doloribus eveniet rem maiores eaque provident deleniti hic. Maxime eligendi nemo accusantium eligendi sunt sed iusto. Possimus commodi sint. Adipisci ullam sunt perferendis nesciunt debitis impedit odit. Facere doloribus dolore laborum atque asperiores praesentium illo quaerat odit. Cum sint a aspernatur perferendis consequuntur quibusdam enim fuga expedita.

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