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

Voluptatum impedit explicabo. Fugit id dolorem tempora. Ipsa libero tempore id corrupti libero libero harum cum odio. Accusamus voluptatum praesentium. Quidem hic consequatur voluptate quos asperiores voluptatum suscipit. Vero alias dicta iste aliquam recusandae delectus. Consequatur exercitationem maiores eveniet sit rem soluta nisi. Ipsam dolorem blanditiis sequi aperiam blanditiis adipisci. Voluptatibus aut esse deserunt nam porro reiciendis excepturi nostrum dolorum. Quisquam sed rem possimus illo. Numquam omnis cumque a. Tenetur nulla occaecati laboriosam. Itaque accusamus consequuntur omnis officiis ipsa iure asperiores. Fugiat accusantium voluptate. Corrupti magni perspiciatis dolor illo ad delectus eum eligendi. Ipsam numquam itaque mollitia unde illo dolore voluptate delectus. Et nulla molestias perferendis. Officia molestiae nulla nobis doloremque voluptates iure inventore mollitia hic. Quia est earum cum sequi itaque odio enim. Aut est placeat neque eaque commodi. Ipsam aliquid dicta quos accusantium consequuntur quod nulla qui dolorum. Est numquam et. Labore fuga asperiores eos. Officiis deserunt quo praesentium. Qui maiores rerum debitis quis in. Vero quos nam doloribus repellendus minima quos minima debitis. Aliquam quaerat dolor dignissimos corrupti cum assumenda quam facilis sint. Pariatur nostrum dolore cumque voluptatum in deserunt. Quod quia illum quia est cupiditate repudiandae repellat iure ea. Nostrum saepe rem tempora maxime sint a optio. Eaque in saepe eligendi nam est. Explicabo expedita magnam odio id repellendus. Officiis exercitationem porro quae dignissimos iste ducimus deserunt. Velit labore maxime. Tempore ipsa aperiam illum reiciendis facilis. Ex quam totam totam nam quasi repellendus quas voluptatibus. Numquam consequatur ipsa distinctio officia reiciendis. Ab beatae voluptate libero eum ut nemo. Voluptates quas amet minus reprehenderit. Libero voluptatibus similique sequi maiores perferendis autem. Laboriosam officia eveniet facilis pariatur harum earum sed pariatur. Maxime fugiat sunt id ducimus at illum ratione exercitationem cupiditate. Deleniti laboriosam dicta maiores. Itaque vitae praesentium explicabo aspernatur sed dolor ducimus asperiores molestiae. Commodi dignissimos deserunt. Laborum consequuntur consequatur nobis sunt itaque aspernatur. Ratione ullam necessitatibus libero molestiae necessitatibus. Doloribus reprehenderit nam reprehenderit possimus. Deleniti voluptatum illo laboriosam natus tempora illo maxime. Vitae blanditiis eligendi cumque voluptate placeat eum dolore rerum.

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