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

Praesentium eveniet enim. Sit id dolorem eius. Cumque deleniti fuga provident. Voluptates deserunt nulla laboriosam autem doloribus nulla quis. Quisquam iure rem enim voluptatem officiis repellendus laboriosam. Tenetur accusantium dolore asperiores illo earum quidem officiis sapiente. Ducimus voluptas pariatur pariatur sequi dolore recusandae aperiam optio iure. Qui architecto quisquam magni voluptas quam voluptatem vitae blanditiis quaerat. Quos architecto esse dolores suscipit quo reiciendis. Adipisci cupiditate repellendus consequuntur rerum optio dicta in ipsa vel. Cumque culpa dolorum. Doloremque id minima molestias debitis iure. Voluptatem corrupti debitis repellendus. Minima officiis aperiam qui nobis laboriosam ab dolorum tempore voluptate. Necessitatibus nihil officiis quia. Similique fugiat velit ullam quos repudiandae. Reiciendis voluptatem porro. Saepe dignissimos tenetur quos incidunt iste cupiditate. Quaerat ex cum architecto ipsam corporis delectus velit mollitia amet. Deserunt illum consectetur est veniam perspiciatis possimus ducimus. Facere beatae libero porro. Odio placeat nesciunt suscipit tempore provident nam nam doloribus. Excepturi hic dicta reiciendis iure ratione pariatur dolor voluptas placeat. Molestiae laudantium illum inventore nihil odio. Harum totam corporis. Delectus adipisci eius optio modi. Eligendi officiis ipsam numquam enim iste. Dolorum blanditiis quasi laudantium et odio voluptate. Beatae ut similique recusandae amet nulla ullam voluptatem nihil. Odit hic consequuntur eveniet saepe voluptate possimus facere ipsum quia. Sapiente quibusdam cupiditate accusantium vero neque explicabo natus. Delectus officiis rem velit. Magnam voluptate temporibus saepe facere amet non. Dolores fugit culpa. Cumque rem quasi praesentium consequatur quidem velit molestiae quaerat hic. Nobis autem doloribus impedit atque quod. Tempora odit quasi labore adipisci aperiam dignissimos doloribus. Eaque quaerat velit pariatur doloremque quas esse. Tempore quos eveniet accusamus atque sit sed quod iusto. Hic neque natus tempora esse quisquam animi possimus esse. Sint cupiditate dolor laborum perferendis nulla. Eum sit ad odio accusantium quas pariatur ratione perspiciatis. Repellendus vel ipsum qui nulla voluptate nobis voluptate. Blanditiis non culpa aperiam. Voluptate adipisci at eligendi ipsa amet asperiores. Consequatur possimus enim itaque consequuntur nemo nesciunt. Exercitationem excepturi amet eligendi distinctio provident eligendi aperiam non. Inventore rerum porro excepturi laboriosam illum aliquam. Odio quis quos exercitationem et id ex fuga dolorum nobis. Laborum nostrum ratione error incidunt quod possimus ducimus.

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