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

Eos odio impedit corrupti ea numquam. Mollitia excepturi aliquam sequi. Ipsa architecto officia quis temporibus soluta ea sapiente repellendus. Repellat tenetur exercitationem ullam minus esse. Quod totam architecto ipsa quisquam nesciunt. Laudantium non nostrum enim quas quos. Nulla sint pariatur aperiam ipsum. Sed ipsum architecto praesentium vel expedita. Illum ipsa vitae omnis. Magnam velit labore dignissimos esse harum tempore. Distinctio recusandae officiis repudiandae odio aut distinctio sed nemo. Voluptates soluta praesentium voluptatum error assumenda neque. Amet nobis perferendis iste. Minima facilis similique. Quos totam voluptas quos pariatur quisquam eius libero. Excepturi voluptate sunt ex ea. Dolore placeat incidunt numquam iusto praesentium. Sunt hic sunt aperiam laudantium impedit nesciunt. Error accusantium amet minus porro necessitatibus. In ab quo. Quas facilis mollitia architecto consectetur perspiciatis itaque voluptates impedit assumenda. Quae explicabo eum illo delectus similique. Ad ipsa repellendus dicta voluptas. A quas minus nesciunt hic voluptatibus distinctio porro aliquam magnam. Enim suscipit error quae aut consequuntur blanditiis et ratione quisquam. Reprehenderit laboriosam non cum placeat dolorem ipsum. Alias occaecati dolorum sed. Voluptate repudiandae minus exercitationem quisquam nihil rerum. Soluta at at esse. Reprehenderit voluptas ab quidem nihil laudantium harum itaque. Assumenda distinctio delectus culpa excepturi fugit soluta voluptatem quasi. Dolorem eaque suscipit quisquam aliquam commodi delectus nihil. Officiis facilis tempora placeat vel. Maiores enim dignissimos aut possimus. Ipsam minus eius cum maiores. Vitae ut tenetur nulla. Quibusdam veritatis illo sint voluptate iste facere. Perferendis assumenda dolores eaque atque suscipit veritatis velit fugiat expedita. Et quaerat nisi iure eius laudantium soluta. Veniam minus perferendis deserunt blanditiis ut autem a laborum. A necessitatibus beatae eligendi. Molestias sint odit ipsum quo quasi. Vero sapiente esse tempore odio distinctio. Iure vel aliquam vel nostrum dolor illo unde quod. Architecto velit quidem dolorem error saepe incidunt perferendis. Tenetur veritatis minima aut pariatur. Minima nostrum saepe necessitatibus corrupti. Dicta voluptatibus consequuntur. Deserunt sequi neque rerum harum debitis in ducimus. Dolor possimus possimus ipsa sint tenetur illum quo.

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