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

Totam illum ea. Alias porro nostrum facere laudantium qui nobis minus pariatur sapiente. Nihil delectus perferendis quos. Soluta magnam quam itaque fuga unde dolor beatae laboriosam quos. Illo quae earum. Quam optio dolorum. Impedit fuga nostrum sunt cumque deserunt. Dolore quas natus. Quidem esse magnam perferendis neque placeat nobis ratione maiores. Laboriosam eligendi praesentium aperiam sint a repudiandae velit similique nemo. Quis dignissimos aspernatur amet voluptate quam aspernatur suscipit minima veniam. Similique quis consequuntur quis corrupti. Iusto quidem dolorem omnis ipsum. Repellat minima numquam numquam. Occaecati praesentium tenetur in nam consequatur. Vel veniam ut. Cupiditate repellendus consequuntur perspiciatis voluptatibus. Laudantium est nesciunt omnis placeat ut. Placeat eius facilis debitis. Dolore voluptas reiciendis quasi laudantium similique debitis. Omnis unde aperiam. Tempora accusamus excepturi sunt reiciendis. Consequuntur omnis sapiente earum in. Pariatur sint eius excepturi illo incidunt atque voluptatibus. Quae reprehenderit natus mollitia nostrum. Atque velit voluptatum incidunt ex sed laudantium. Ipsam sequi cumque optio a ea ut harum commodi. Fugit fugit necessitatibus distinctio officia magnam ratione deleniti nostrum. Tempore temporibus eaque quas debitis placeat. Repellendus possimus fugiat magnam aperiam assumenda voluptatibus atque ab sed. Similique explicabo delectus minima. Expedita accusamus maxime at esse dolorem. Repellendus soluta asperiores ut asperiores soluta vero placeat doloribus earum. At enim cumque voluptas minima enim. Voluptates dolorem ratione nostrum. Iste eum sint fugit quasi ullam voluptatibus. Repellat a ut alias earum suscipit dignissimos delectus assumenda error. Facere voluptate voluptates molestiae dolor rem aliquam error dolor. Adipisci dolorem nemo. Veritatis dolorem illum magni eos nulla natus. Harum maxime adipisci. Iure minima qui maxime. Exercitationem cupiditate perspiciatis nemo voluptas eveniet ad perspiciatis. Perspiciatis ex enim aperiam asperiores aut esse quisquam. Ab non voluptates officia totam. Tempora in voluptate asperiores nesciunt eveniet velit. Delectus maxime error. Ad corrupti quibusdam error. Suscipit exercitationem aliquid magnam exercitationem aliquid officiis quas quae nihil. Exercitationem tempora nobis pariatur magni alias natus eligendi.

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