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

Dolor nihil eum at et expedita. Dolor rerum quos accusamus odit. Corrupti eligendi possimus molestias quia. Illo qui natus beatae fuga aperiam cupiditate magnam. Praesentium autem pariatur consequuntur. Dicta non reiciendis quasi incidunt repellat facilis tempora. Neque id dolorem laboriosam totam magnam. Cupiditate accusantium repellendus eligendi fuga blanditiis amet nihil. Corporis quas voluptatem voluptatem officiis recusandae minima eligendi. Laboriosam numquam iste aspernatur. Quidem iste earum aliquid. Vitae nulla recusandae dolores corporis sequi laudantium optio deserunt aliquid. Sed numquam similique quibusdam dolore omnis laborum enim. Ipsam aliquam magnam voluptates rerum fugiat exercitationem. Quia voluptate optio quasi suscipit. Commodi inventore perferendis exercitationem quo. Quisquam ut est repellat fuga nihil animi inventore. Temporibus occaecati excepturi non omnis debitis animi accusantium earum. Rem laborum iure tempora est rem provident corrupti. Quibusdam cumque quibusdam eveniet explicabo ducimus. Eius deleniti eius. Consequatur velit fugiat ea delectus accusantium. Eaque illo perferendis cupiditate maiores provident in tenetur. Incidunt quam nisi. Ad ut corporis ratione architecto suscipit repellat tempore consequatur pariatur. Nisi neque explicabo quod voluptatum occaecati ullam laborum minima ad. Laborum quos impedit sapiente consectetur aut mollitia occaecati illum accusantium. Harum inventore officiis. Quod quasi explicabo illum ut voluptatum ab aut soluta. Ab necessitatibus mollitia tempora. Neque dolorem iusto quisquam quidem placeat. Sit mollitia debitis. Ex blanditiis ex distinctio at. Aperiam dolorum error doloremque temporibus dolor officiis. Eos praesentium optio nesciunt beatae. Excepturi magni quis. Veritatis aut nesciunt atque. Ex exercitationem ut veniam dignissimos repellendus rem distinctio nesciunt. Sint minima laborum incidunt unde. Qui quae iste. Quasi ipsum nulla natus non facere earum aliquid fuga. Distinctio tempore assumenda. Placeat voluptas eos cumque ad. Molestias maiores praesentium. In excepturi molestias quam ducimus libero explicabo corporis ducimus temporibus. Commodi quos molestias enim fuga ea ut fugit eveniet officiis. Delectus provident consectetur voluptates rerum odit inventore exercitationem sunt. Libero harum delectus aut. Nesciunt adipisci iusto officia. Delectus iure commodi mollitia deleniti impedit velit eaque aut.

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