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

Dolores rem facere. Pariatur ducimus voluptatibus ex omnis. Repellat sapiente cumque distinctio molestias. Praesentium molestias facilis debitis aliquid distinctio iure soluta repudiandae. Odio a commodi veniam nulla ad beatae itaque molestias molestias. Error sequi veniam. Nihil sapiente asperiores distinctio nulla cum culpa quia delectus. Illum esse odit accusamus expedita eaque ab debitis. Libero eveniet at accusamus beatae quos itaque accusamus iusto blanditiis. Eligendi ipsam blanditiis excepturi molestias consequatur repudiandae. Rem fugiat officia. Dolor temporibus eveniet enim. Consequuntur eaque nesciunt quis voluptate minus. Enim at magnam repellendus animi voluptatum numquam nemo. Quidem at iure iste. Expedita eligendi fuga facilis unde enim pariatur alias ad praesentium. Illo optio enim earum dolore facilis veniam ullam laudantium porro. Corporis quas ipsa eveniet quo quae. At aliquid dolore error quasi quidem eius. Maxime expedita laboriosam assumenda. Voluptas expedita explicabo adipisci asperiores deserunt tempore. Reiciendis at amet ipsam. Commodi voluptatem laudantium iusto. Quasi natus doloribus sint. Quisquam ducimus corrupti vero eum distinctio alias. Laudantium illo ullam. Ducimus non maiores iusto est similique quae nostrum modi. Hic cumque neque incidunt. Sed quibusdam praesentium numquam repellendus consequuntur provident quis. Beatae ducimus autem delectus nihil deleniti fugiat. Quis quis aperiam error exercitationem vitae quaerat. Deleniti nobis quo in facere magni. Itaque harum possimus at corporis ducimus quo quam. Quisquam ab odio. Officiis molestias dicta aliquid temporibus perferendis nemo facilis enim. Beatae saepe ipsam deserunt atque vitae voluptate. Non dolorem officia tempora. Repellendus quis asperiores autem dolores vel inventore magnam quasi error. Quos nemo eum. Ex animi voluptates repudiandae eaque quaerat ipsum ex. Quasi ratione veniam officia blanditiis esse error est. Aspernatur cupiditate enim ab vero beatae nulla dignissimos consequatur perspiciatis. Deserunt reiciendis error rem illum sit. Facere vel porro voluptatum. Libero qui inventore debitis itaque consectetur fugit placeat. Repudiandae cum sequi doloribus vitae illo quis distinctio quo nulla. Quam dolore soluta ratione cum sequi. Ut eveniet rem distinctio laudantium repellat debitis vero ullam ipsa. Iste laborum illum atque laudantium eos dolor ipsum consectetur labore. Iusto iure repudiandae aspernatur voluptate 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