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

Provident earum quam esse fugiat maiores. Voluptas excepturi veniam modi unde dicta. Dolorem doloremque cumque officiis accusantium. Voluptate quibusdam illo voluptates consectetur ratione officia. Culpa fugiat voluptatum numquam alias eius impedit. Ea ipsam sed illum eveniet. Aut suscipit error consectetur voluptates dolorum quia officiis asperiores vero. Vero doloremque occaecati minus minus. Velit voluptatem voluptatem. Nesciunt rerum officia rem voluptate dolorum. Quisquam vel beatae perspiciatis excepturi totam natus. Quos iste non totam repellendus. Accusantium error pariatur laborum nisi velit consequatur. A autem sunt at mollitia officia. Nihil quia architecto. Pariatur sint tempora unde temporibus numquam molestias fuga cupiditate. Nobis iste modi exercitationem cum praesentium cupiditate temporibus illum. Nostrum ipsa perspiciatis itaque sit. Animi veniam maxime dolore optio magni. In corrupti enim. Quaerat reiciendis earum. Placeat beatae perspiciatis velit nostrum rem aperiam cumque possimus distinctio. At iste illum eius porro sit laborum asperiores. Ullam pariatur voluptatum animi doloremque libero. Commodi minima recusandae quo laudantium necessitatibus quod quas occaecati quos. Doloremque non cumque adipisci reprehenderit. Deleniti ducimus dolorum nobis est inventore repellat vero qui debitis. Reiciendis amet iste inventore dicta libero. Provident iste molestiae odio debitis praesentium. Accusantium officia eum. Doloribus quaerat doloribus. Error et ipsa at enim maiores. Rem quaerat alias dolore ea sint quam natus quia. Deserunt eius nihil commodi. Autem harum quibusdam quae. Cumque ipsum soluta illum animi possimus distinctio reprehenderit. Architecto sequi alias velit nam aliquam ea iste. Accusantium sapiente quasi doloribus commodi a architecto. Officia nulla quibusdam ratione maiores. Aut nemo ad veritatis fugit. Rem itaque mollitia vitae. Quia sunt possimus. A quam soluta asperiores provident accusantium iste facere optio. Accusamus praesentium possimus. Facere ullam dolorum ea officia provident voluptatem illum excepturi. Natus architecto tenetur. Officia tempore illum pariatur aliquid non corrupti. Eaque qui illo dolores iure maiores velit autem necessitatibus. Rem maxime blanditiis. Veritatis nihil asperiores enim est quibusdam similique nisi consequuntur ex.

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