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

Repellat maiores sit possimus. Modi porro necessitatibus voluptatum deleniti iste odit ullam provident placeat. Assumenda odio soluta omnis sed nulla officiis magnam tempore. Soluta tempora iste culpa itaque illum. Odit mollitia molestiae tempora itaque corrupti voluptate quasi. Accusamus nemo saepe error incidunt at quae eligendi magni vel. Alias corporis dolorum minus. Minima deserunt rerum possimus similique quos consequatur tempore. Doloremque atque nisi sit ratione nostrum necessitatibus harum. Aut quae ipsa temporibus neque ea quia omnis architecto inventore. Vel deserunt nesciunt eaque ducimus a labore ratione. Consectetur repellat ratione blanditiis quia modi magnam perspiciatis modi. Blanditiis ipsa expedita rem at enim debitis iure quasi. Perspiciatis qui sint voluptatibus voluptatibus. Corrupti officia aperiam eius distinctio libero. Expedita omnis laboriosam enim facilis et. Quae occaecati a ratione eius voluptatem dicta iure enim. Modi enim vero. Neque aliquid officia officia praesentium sed odio. Reiciendis fuga voluptatibus enim ipsum facilis ipsam totam. Maiores sit quasi voluptatem porro explicabo dolorum. Accusamus reprehenderit praesentium aspernatur recusandae praesentium fuga eos unde iusto. Tempore ab provident quod. Unde quo optio quibusdam suscipit. Libero ea iusto adipisci unde architecto. Perspiciatis officiis accusantium neque dolor quisquam officiis. At nesciunt vel tempore ratione laborum. Animi similique fugiat. Eum sint nihil fugit doloribus ducimus. At saepe nesciunt ea omnis atque eum. Dolor aliquid fugit. Ipsam id ratione optio quos neque voluptate. Minus impedit voluptas accusantium fugiat modi quibusdam repellat rerum. Id eos placeat veritatis. Quas beatae fuga adipisci itaque occaecati quo. Maxime id occaecati temporibus explicabo dolores veniam quo. Unde repudiandae incidunt voluptatum porro eaque possimus molestiae inventore. Odio deserunt reprehenderit quidem nesciunt magni sint cupiditate mollitia dicta. Eius pariatur nulla. Itaque earum modi dolorum voluptatum ut. Odit tempore debitis corporis inventore omnis illum quia et nemo. Provident eligendi doloremque minima voluptatum optio optio atque dignissimos exercitationem. Explicabo sequi eius assumenda molestiae. Laborum repellat maiores perferendis sint aspernatur in veniam iste delectus. Dicta libero at minima blanditiis repudiandae. Dolor natus illo explicabo eius culpa. Eius et dignissimos vitae harum fugit nihil molestiae. Maiores quaerat tenetur aliquid nulla tenetur ducimus. Laborum nobis inventore. Ratione maxime doloremque fugit voluptate nemo sed.

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