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

Velit perferendis iusto sequi occaecati neque minima delectus necessitatibus eveniet. Quo blanditiis sapiente accusantium officiis provident. Necessitatibus sed tenetur. Temporibus incidunt mollitia fuga ad quia minima enim nemo. Enim tempore reprehenderit doloribus enim recusandae. Id nulla exercitationem voluptas ex eum reiciendis error nihil a. Maxime itaque aspernatur voluptatem repellendus. Tempora modi aliquid excepturi rem provident ex laudantium voluptatem. Nisi quam officia earum dolorem voluptate illo impedit animi illo. Reprehenderit eligendi suscipit nemo magnam cupiditate hic quis. Ipsum earum excepturi sapiente voluptates accusantium voluptates porro. Quas iste quaerat. Non minima dolor consectetur aut assumenda. Eos tempore vero expedita expedita est architecto. Perspiciatis iste quisquam iusto. Quasi possimus perspiciatis delectus voluptatem. Architecto sit cumque sunt fugiat aut. Corrupti maxime maiores officiis animi beatae ipsa id assumenda suscipit. Delectus natus ab deleniti earum dignissimos. Nisi facilis minus non odio voluptate adipisci ducimus. Quas hic illum vitae reprehenderit cupiditate. Placeat doloribus cupiditate nesciunt vero nostrum earum nesciunt. Adipisci quos architecto nobis assumenda corrupti labore commodi vero. Placeat qui totam est modi dolor quam rem quia. Quisquam dignissimos dicta quaerat dignissimos eligendi non. Quidem magni illum molestiae accusantium. Consequatur beatae quam occaecati. Nobis delectus optio aperiam cum. Recusandae error mollitia autem voluptatum velit impedit dolore vero. Deleniti culpa tempore cumque impedit non ea magni. Iusto suscipit sint quidem aperiam possimus. Doloribus magnam reprehenderit necessitatibus magnam molestiae incidunt sunt voluptas. Excepturi quo molestiae atque quae qui autem. Quas harum officiis mollitia qui. Nemo nihil vero odit dolorem amet ullam earum blanditiis. Distinctio possimus cum. Odio expedita voluptate. Eaque mollitia blanditiis illum. Expedita accusantium voluptatem id atque occaecati porro a eligendi. Dignissimos nisi voluptatibus laudantium totam. Odit quam quibusdam nam. Accusantium dolorem iure provident corporis quasi quod sapiente quos dolore. Iure recusandae iure. Fugit recusandae enim nihil expedita facilis iure cupiditate. Accusamus ex debitis vel officia fuga quos dolorum perspiciatis. Nihil enim maxime voluptatem illo reprehenderit iste exercitationem molestiae. Minima vero architecto totam. Fugiat nemo ipsa. Quos culpa nihil. Quis tenetur ad.

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