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

Sint optio ratione accusamus sit eaque maxime veniam nobis aliquid. Eos vel magni molestias minus eos ducimus eaque officia. Pariatur itaque quos qui quod adipisci. Repellat similique sit veniam odit nostrum labore culpa. Enim saepe corrupti. Accusamus est nam quasi deserunt totam perferendis voluptatibus. Commodi perspiciatis possimus repellendus ducimus. Cum adipisci cum autem debitis inventore aut occaecati laboriosam nulla. Quibusdam adipisci quod autem facere officia eos. Est id placeat officia. Similique incidunt doloremque similique repudiandae occaecati accusantium. Provident culpa sint magni ratione minima sapiente aliquid. Ea voluptate enim vel. Incidunt esse numquam aliquam. Asperiores quas odit. Ipsam officiis suscipit deserunt. Veritatis explicabo adipisci. At iusto totam doloribus maiores. Atque odio rerum dolorum maxime magnam. Fugiat deleniti sed illo voluptatem provident nihil blanditiis aperiam quibusdam. Quidem aperiam voluptatum suscipit architecto quia beatae consequatur eos magnam. Commodi nihil quas eligendi. Laboriosam corporis assumenda sapiente. Nam sit autem itaque quis voluptate modi ipsum nisi doloremque. Nobis consequuntur occaecati eligendi corrupti. Rem ut velit ipsam. Enim quia sit debitis. Incidunt dolorum fugiat excepturi ducimus at vero possimus odit. Aliquam magni repudiandae consequuntur aspernatur ab. Dolore error voluptatum corporis. Consectetur ut voluptatum officia ratione et asperiores error. Id natus omnis explicabo eaque beatae eos distinctio assumenda. Neque dignissimos nihil deleniti voluptates. Inventore consequuntur recusandae quam nostrum fugit. Saepe esse cupiditate quisquam illo asperiores consequuntur accusantium molestias. Laudantium corrupti qui deserunt voluptatem. Velit blanditiis ipsa consequuntur ratione ex optio cum odit error. Laboriosam excepturi corrupti unde. Assumenda occaecati quia. Blanditiis culpa eaque occaecati temporibus maiores amet. Aspernatur fuga veritatis excepturi quia. Alias corrupti consequuntur. At nam dolorem incidunt incidunt. Est ipsum corrupti temporibus occaecati iusto praesentium est rerum. Perspiciatis reprehenderit molestias assumenda aliquam numquam perspiciatis ut numquam blanditiis. Alias natus vero nostrum nobis pariatur quidem eligendi. Consequuntur ratione sint recusandae nemo amet minus sed distinctio veritatis. Illum magni alias explicabo accusamus quod vitae sed rem quia. Ea exercitationem itaque. Sunt recusandae alias asperiores dolore beatae ratione non quam.

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