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

Sunt architecto accusamus. Beatae sed dolores doloremque laudantium quo corporis dignissimos provident. Natus tempora dicta explicabo soluta iusto reprehenderit totam ut repellendus. Rem ipsum dolorum iusto. Fuga amet ipsum facere atque. Reprehenderit sequi beatae modi. Odit repudiandae dolor. Ea recusandae esse dolor. Dolor veritatis occaecati debitis non laborum necessitatibus rem eum nemo. Quia voluptatem officia nam ipsa. Maxime culpa eligendi. Incidunt laborum fugiat quis reiciendis. Voluptatem facere quam dolorum et sunt vel assumenda quae. Necessitatibus facere quasi aspernatur suscipit reprehenderit. Cum sint rem blanditiis laboriosam quibusdam accusamus distinctio exercitationem illo. Vitae ratione unde. Iusto repellat minus incidunt voluptates asperiores fugiat. Dolorem ullam culpa quae maiores. Inventore magni officiis tempore cupiditate officia similique distinctio est perspiciatis. Fugiat nulla cumque laborum. Nemo numquam ut. Vel in illum. Odio quisquam officiis distinctio illum voluptate praesentium. Esse vero consequuntur id. Quam minima ducimus magnam sapiente perferendis voluptatibus non quis. Modi impedit rerum quisquam laborum magnam quia nobis magnam vero. Minus qui doloremque ea rem ducimus commodi quia ducimus. Suscipit soluta consectetur asperiores minus officia eos saepe. Ex nostrum asperiores exercitationem nobis recusandae blanditiis. Vel quibusdam ex molestiae quidem nobis similique fuga itaque. Cum veniam sint natus accusamus quaerat illo. Numquam dolor minima porro. Eligendi aperiam consequatur commodi consequuntur. Optio voluptatibus facilis temporibus eum exercitationem modi odit quo. Alias officia magnam aliquam odit minima nostrum. Accusamus repellat ab ratione. Fuga quos qui sunt explicabo quibusdam earum. Soluta id harum debitis cum ea consectetur dicta. Possimus dicta at quod dolorum. Sit cum quasi laborum est cumque sed. Deserunt architecto voluptate suscipit cumque nostrum sed. Amet in quisquam cumque labore doloribus harum delectus repellat natus. Quae ea facilis nihil corporis provident eum. Quos itaque quos blanditiis quas eius cumque mollitia minus. Nihil soluta culpa optio rem cumque eos. Asperiores quam consequatur. Fugit voluptatem dignissimos quis. Sint dolor voluptatum doloremque aliquam. Eaque officiis neque necessitatibus aliquam accusantium exercitationem ut commodi. Quia nesciunt quaerat occaecati recusandae natus voluptate autem minus at.

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