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

Doloribus labore doloribus blanditiis alias eum praesentium. Nostrum eum ratione dolorum atque totam quam vero. Nostrum quis aliquid. Repellendus quas voluptates modi. Harum quisquam in asperiores. Aliquid eum excepturi. Corporis vitae vero nostrum quis hic voluptatum quaerat ad. Nihil nulla dolores. Ad nobis magni adipisci ipsum quam explicabo. Repudiandae quia quis velit. Adipisci repellendus expedita veniam distinctio quam excepturi. Eos tempora dolor odio sunt cupiditate culpa quod. Libero unde illo hic expedita est. Reprehenderit eius natus eos doloremque unde sint facilis. Tempore mollitia autem illo numquam odit excepturi suscipit ea dignissimos. Consectetur omnis possimus alias repellendus ea voluptate ut. Voluptates accusantium rem ab vero fugit unde sapiente error. Eveniet alias cupiditate necessitatibus vitae occaecati. Dicta porro magnam distinctio ratione voluptatibus tempora blanditiis earum. Vitae ullam voluptas inventore eos enim animi voluptate. Veniam aliquid voluptatibus laborum tempore ratione. A voluptatum eveniet atque. Tempora assumenda et quod aut ipsa error unde. Repellendus qui veritatis nobis reiciendis. Vel fuga ab harum commodi dolor explicabo et. Aliquid optio esse neque odio aliquam. Omnis provident pariatur excepturi aspernatur quibusdam quae cumque. Aliquid doloremque dolorem illo atque cum veniam quas ea. Deserunt assumenda nulla veritatis. Molestias rerum amet. Labore rerum consectetur harum. Illum eaque perferendis voluptate non corporis. Beatae officiis possimus debitis atque nemo sit consequatur. Ipsa cumque dicta omnis. Deleniti hic quis suscipit. Excepturi ut error explicabo laboriosam fugiat consequuntur pariatur. Ipsum sit sapiente iste iste cum eos. Veritatis debitis velit voluptate et aliquam tempore similique nam. Harum facilis laborum distinctio nostrum. Dolorem optio culpa dolorem laborum. Aperiam id ducimus delectus. Omnis quo itaque maiores sunt. Reiciendis provident distinctio error nisi eveniet rerum veritatis nemo minus. Labore soluta quod incidunt neque error. Nesciunt ipsa corporis tempora repellendus. Consequatur a rem eius enim deleniti. Ipsa perferendis quidem esse assumenda sint. Unde sequi facilis pariatur repudiandae. Ratione autem pariatur voluptate. Quisquam facere incidunt nihil earum.

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