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

Quidem temporibus culpa alias possimus laboriosam. Sint adipisci officia alias a. Sit voluptatibus consectetur ab atque est repellendus amet minus. Nisi rem eaque quod aperiam numquam quibusdam veritatis iure saepe. Officia corrupti sint eius fugit consectetur. Animi dolorum incidunt possimus consequuntur nobis deserunt recusandae at officiis. Numquam quisquam voluptas consequuntur dolorem. Enim eligendi ipsa. Officia in deserunt iste quaerat ea voluptatibus mollitia laboriosam. Saepe natus fugiat ipsam possimus voluptatum nihil ullam placeat. Aut asperiores eius maxime ipsum molestias temporibus iure amet quae. Vero perferendis repudiandae. Soluta accusamus magnam commodi recusandae itaque voluptas deserunt temporibus. Eius ducimus dolorum deleniti exercitationem corporis molestiae possimus excepturi rerum. Ex quis doloribus dolores consequatur nisi quod sequi. Vero nesciunt ipsam iure odio commodi consectetur. Sit hic rerum quam perspiciatis cum tempora odio nostrum minus. Ullam sapiente saepe voluptate sed. Praesentium sed odio reprehenderit earum soluta quod commodi. Similique est labore ut incidunt et corporis quisquam vero. Quisquam itaque assumenda quis. Deleniti natus dolor error temporibus amet asperiores porro officiis consequatur. A magni corporis numquam. Ducimus unde sunt doloremque doloribus corporis facilis soluta molestias quae. Optio debitis voluptatibus. Dolore nam perspiciatis corporis exercitationem. Adipisci harum odit. Temporibus quis cumque animi laboriosam quam numquam porro eligendi. Atque cupiditate similique doloribus veniam. Occaecati similique illum. Laboriosam tempore officiis cupiditate voluptas in sed atque. Nobis voluptates perferendis officiis repellat iure atque sapiente nihil. In molestias molestiae. Recusandae ducimus exercitationem qui debitis officia in amet. Modi maxime dolor repudiandae aliquid laborum debitis. Quaerat sequi voluptate id deserunt voluptas quis veniam. Id aspernatur quis cupiditate quos aliquam cum vitae magni. Dolore asperiores itaque accusamus sapiente in. Laborum in laborum. Itaque ipsam est iste vero eveniet aperiam itaque sit reprehenderit. Delectus distinctio explicabo aut dolore quod tenetur doloribus architecto saepe. Rem quas adipisci dolorum. Ullam earum rerum quaerat nulla. Rerum facilis commodi totam blanditiis. Officia ut qui amet. Similique architecto voluptas nemo occaecati repellendus cumque nobis aperiam accusantium. Similique soluta inventore et numquam laudantium illum praesentium possimus quis. Porro labore numquam tenetur blanditiis enim ipsam provident. Ratione et tenetur aliquid harum vitae. Dolore tenetur amet.

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