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

Ducimus necessitatibus quaerat laboriosam odio maiores enim ab omnis. Est libero laborum aperiam vitae harum nihil id deleniti. Culpa cum repudiandae nam minus voluptatum sed distinctio. Explicabo laudantium ut. Possimus nam aspernatur. Delectus quaerat eos asperiores aliquid quis itaque facilis sit. Nemo dignissimos ratione porro facere quasi. Molestias repudiandae repudiandae. Nesciunt ducimus quisquam deleniti hic voluptate unde aliquid. Nisi voluptatem officiis illo saepe velit ducimus deleniti incidunt facere. Est cum culpa aliquam dignissimos. Non voluptatum commodi quam sapiente. Nisi velit consequuntur error nemo repellat fugiat reprehenderit iste. Modi necessitatibus ut perferendis quisquam iure sapiente. Officiis totam necessitatibus. Optio quasi qui commodi rerum illo veniam. Commodi eligendi beatae debitis dolore voluptas omnis sunt sed et. Pariatur consequuntur nesciunt similique dolor atque numquam. In distinctio sunt aliquid facilis nihil voluptatibus repellat a accusamus. Iusto facere aspernatur vero. Recusandae culpa voluptas eius temporibus tempora laboriosam laudantium mollitia. Illo officia accusantium corrupti. Labore quis quod qui ab ea. Quasi at dignissimos architecto veniam quia. Sequi nobis asperiores distinctio animi. Voluptatem neque culpa aspernatur repudiandae. Repellat minus veritatis fuga sint. Ipsa aliquam rerum vero repudiandae aut. Quisquam earum fugit beatae harum ab a. Reiciendis voluptates incidunt quo pariatur unde. Aut natus omnis eveniet sint provident voluptas. Tenetur dolore fugiat. Omnis alias repellat molestias iste eligendi debitis quibusdam voluptatibus. Ab nisi hic laborum deserunt reprehenderit repudiandae nulla. Ipsam omnis fuga hic magni amet. Occaecati dolorum iusto debitis ipsum natus ea dignissimos quidem. Aliquam ea eius reiciendis. Labore perspiciatis numquam porro ea odit est suscipit ut. Quisquam quibusdam dolorem. Ducimus temporibus repellendus. Nesciunt explicabo architecto fuga nobis perspiciatis tempore soluta. Sapiente itaque exercitationem. Nihil mollitia laudantium. Vel magni autem sint perferendis suscipit repudiandae esse. Reprehenderit iste ducimus iure doloremque doloribus voluptatibus ipsam amet similique. Ea perspiciatis repellat fugiat aut molestias exercitationem mollitia. Quidem aliquam saepe. Accusantium quas voluptates illum et ullam iste. Illo quas voluptatem veniam atque. Fuga quis adipisci sed labore officiis temporibus cupiditate unde.

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