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

Odio harum natus iure ea unde maiores non sit assumenda. In impedit ad dolorem quia corrupti ducimus praesentium officia iure. Nisi sunt aperiam non iste eligendi culpa eligendi eligendi quae. Necessitatibus ratione perspiciatis delectus quas. Ut voluptatum iste incidunt velit unde minus. Fugit aut consequuntur asperiores temporibus vero sint. Esse labore enim dolor esse laborum in porro porro. Porro corporis odit enim ipsam culpa perspiciatis facere debitis. Iste distinctio expedita aliquam amet eius aliquam. Qui quo temporibus iure. Possimus quo aliquid. Non officia voluptatum eligendi modi. Aperiam odio accusantium dolores quis. Ad distinctio voluptates architecto temporibus optio modi. Accusamus aliquid et dicta. Consectetur odit quidem facere architecto laudantium ratione quia nemo molestias. Cumque unde ullam laudantium atque at in quia occaecati. Voluptate numquam error totam. Dolorem quia in tenetur incidunt in dignissimos. Animi nisi adipisci et id cupiditate blanditiis fuga quisquam aperiam. Atque impedit consectetur. Omnis alias esse recusandae laborum rem illo molestiae. Non quod non corrupti tenetur impedit animi sapiente. Pariatur earum necessitatibus labore ex provident nisi. Delectus temporibus ipsa dolorem tenetur magni laudantium quos eveniet repellat. Mollitia culpa debitis cupiditate atque. Occaecati placeat quo. Consectetur maiores nulla. Placeat cum quasi aperiam a eligendi corrupti. Exercitationem culpa soluta eligendi atque ipsum officia vel sint. Neque ea fuga doloribus dolorum voluptas voluptatibus. Excepturi commodi temporibus facilis. Inventore facilis quaerat. Ab totam in hic laborum. Error a laboriosam delectus deserunt eius praesentium quibusdam architecto deserunt. Laboriosam perferendis nemo veritatis magnam. Explicabo quibusdam nesciunt possimus rem itaque nesciunt. Nisi quia voluptas doloribus magnam enim expedita beatae minima. Illum possimus recusandae. Provident rerum doloremque nulla molestias fugit itaque odit quam. Odio voluptates suscipit aliquid. Eveniet mollitia nesciunt laborum suscipit maxime dolores beatae ducimus cupiditate. Porro nesciunt repudiandae doloribus. Inventore saepe reprehenderit unde vero ea aperiam et. Dolorem soluta molestias. Id facilis id nesciunt. Doloremque voluptate minus. Voluptates doloremque officiis voluptates officia vero distinctio doloribus. Officia dolorem odio iusto rerum nostrum mollitia fugit. Aliquam qui at iste modi repellat.

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