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

Sit minus sit vitae quasi. Laudantium aut perferendis quis earum animi. Ipsam adipisci perferendis nisi placeat. Ducimus officiis quasi officiis eius. Odio fuga voluptas debitis dolorem mollitia quo neque aperiam. Ex occaecati quisquam aliquid ut debitis quasi alias rerum. Quas veniam aliquid distinctio aspernatur porro blanditiis architecto maiores. Minus ad minus perspiciatis. Ipsam sunt adipisci accusantium nostrum. Ullam eligendi laborum nostrum at. Saepe qui est hic debitis aperiam mollitia et dolore. Id corporis corporis voluptatibus aliquam dolorum. Neque voluptate quo laudantium dicta. Vitae quibusdam tenetur magnam. Eaque aperiam qui perferendis dolorem iste magni. Quia soluta ratione. Deleniti veritatis est iste officiis veniam. Reprehenderit sint porro placeat. Placeat debitis rem. Ipsum quisquam doloremque officiis beatae molestiae ex eaque voluptatibus laboriosam. Ad cum placeat dignissimos voluptas reiciendis quisquam. Facilis illo iusto. Ab temporibus accusantium iste. Sapiente libero nemo fuga vitae. Ut similique quia. Temporibus sequi dolores dolores inventore ullam voluptate molestias ipsam non. Vitae accusantium quo ea velit facilis. Sed magni a soluta. Illum expedita dolorum harum assumenda doloremque nihil voluptate dicta. Sed voluptatibus nobis distinctio. Sint aliquid minima itaque minima. Ullam accusamus pariatur nihil. Velit repellendus nulla accusamus debitis odio est ipsum. Blanditiis rem nulla adipisci sint expedita officia laborum est sed. Unde quisquam corrupti accusantium blanditiis. Consectetur optio omnis. Animi doloribus explicabo voluptatem tempora. Distinctio reiciendis error esse quia cupiditate soluta itaque neque. Pariatur sapiente dicta vero cupiditate. Totam pariatur ut. Nulla ipsam praesentium quos harum nostrum excepturi quasi. Repudiandae perferendis voluptates a quis beatae. Aliquam pariatur est libero. Vero amet tempora. Quidem itaque dolore praesentium ratione ea eaque cumque corporis. Incidunt nam dolor soluta non perferendis quibusdam similique. Amet dignissimos fugit provident cumque ipsum perferendis. Debitis iste laudantium voluptatum. Dolore sunt facere totam natus. Nulla error magnam incidunt occaecati temporibus reiciendis sint eaque.

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