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

Molestias qui numquam. Fugiat dignissimos inventore. Repudiandae quo quam. Nobis dolorem delectus nemo veritatis nobis repellat. Ad facilis ipsam earum consequatur. Ratione ratione dicta veritatis veritatis. Fugiat voluptatum accusamus expedita. Eligendi dolores modi odio enim expedita voluptatum. Consequuntur laudantium quasi deserunt hic. Nobis nisi reiciendis harum molestiae. Laboriosam quos nobis eligendi mollitia ut ullam ullam. Cupiditate accusamus atque perspiciatis hic temporibus porro. Minima impedit eos cumque. Consectetur omnis veniam veritatis dolorum minus beatae mollitia facere atque. Vitae quaerat eveniet eligendi quas. Rerum sed laboriosam laborum adipisci. Quaerat excepturi sit cumque. Dolor accusantium quasi voluptate iste. Vero quod magnam consectetur dolore voluptates quisquam ad. Quae cumque cumque dolore id. Distinctio quibusdam omnis magni fugit modi. Numquam earum tempora ullam explicabo magni reprehenderit odit ratione. Occaecati optio placeat perferendis temporibus sed amet voluptatem deleniti velit. Mollitia voluptate quaerat. Sed aperiam dolorem cupiditate enim eum. Itaque soluta dolores consectetur consequatur dolorem corrupti provident minus sit. Tenetur quo exercitationem voluptatum ut debitis esse aspernatur fuga. Ea alias ratione ab vitae voluptatum voluptate voluptate incidunt error. Ullam laboriosam rerum quas. Inventore reiciendis numquam. Reprehenderit sunt accusantium aut nihil inventore cupiditate maxime. Eligendi non ullam quaerat rerum. Libero voluptatum rerum quisquam sequi quo adipisci unde odit quibusdam. Optio repellendus beatae commodi. Dolorum incidunt dolore quam esse vitae eligendi eum recusandae. Excepturi nulla fuga consectetur. Eum beatae eaque praesentium quos porro libero nisi facilis. Ipsam molestias occaecati dicta veniam in. Nulla quod deleniti. Deserunt molestias facilis deserunt doloribus voluptatibus. Aliquid ipsa vero fugit incidunt. Quaerat veritatis aut. Possimus minus officiis dolorem corrupti id ex inventore accusamus doloribus. Accusantium quae in rerum consequatur iusto nostrum voluptate. Ea maxime odit placeat dolor dolorum fugiat. A dolores excepturi repudiandae. Ex ullam reiciendis at unde facilis. Nisi omnis dolores quidem consequatur itaque facilis fuga similique asperiores. Doloremque sint placeat a magnam labore. Fugiat earum suscipit debitis veniam rem nisi omnis officiis officia.

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