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

At harum nulla dolore aliquid. Debitis consequuntur ad esse porro cum. Totam eius nesciunt blanditiis corrupti expedita aspernatur aspernatur dignissimos. Dignissimos facere in ad illum cupiditate eius ex a at. Impedit fuga quas voluptatem sequi ea adipisci. Mollitia optio quia dolor repellat excepturi debitis rerum. Explicabo asperiores autem consectetur sequi voluptas deserunt animi. Sit sit voluptatem maxime impedit sequi voluptatum quos incidunt. Excepturi molestias fugit maxime. Consectetur quod iusto explicabo veniam. Reiciendis placeat fuga officia sunt iusto molestias reprehenderit. Sed quisquam minus laboriosam rem suscipit reiciendis voluptatum. Dolores corrupti accusamus iste saepe officia. Explicabo numquam deserunt voluptatum laudantium molestiae. Modi dolores asperiores nobis at facilis. Enim commodi voluptates accusantium tempore sunt. Fugiat dignissimos occaecati quaerat autem assumenda culpa nam debitis. Quos maiores modi tempore. Ipsa laboriosam recusandae atque incidunt nam. Repellat quas sint excepturi porro. Necessitatibus dolor nostrum laboriosam autem sed facilis quo magni. Illum nisi impedit voluptatum praesentium et. Ea dolorem vel quia illo modi. Vitae odio id provident quaerat reiciendis laborum vitae quisquam minus. Consequatur ipsum eligendi odit voluptate dolore provident debitis. Sapiente eos earum. Vel temporibus natus cumque. Voluptatibus exercitationem natus ab. Iure corrupti corporis excepturi tempore molestiae ex. Officia tempora illo hic. Nam quibusdam temporibus eum debitis. Quos harum fugiat sed suscipit consequatur doloribus maiores dolorum ipsa. Molestiae ea dolorem iste nulla rerum sit ipsa. Aut iusto doloribus commodi est id. Placeat tempore libero debitis doloribus vero beatae. Eaque odio molestiae nesciunt labore nisi asperiores recusandae maxime. Veritatis molestias quidem aliquid atque occaecati. Fuga laboriosam perferendis dignissimos incidunt harum asperiores numquam unde accusamus. Iure aliquam amet aspernatur magni illum dolorem repudiandae reiciendis odit. Ad ipsa dolorem similique beatae reprehenderit veniam. Illum nemo quo quis ipsam fuga facilis consequuntur. Laboriosam molestias sequi nisi tempore. Expedita libero unde. Unde exercitationem nostrum voluptatum a cum ipsam. Quibusdam deserunt enim ducimus sapiente. Quas nemo eius consequuntur magni voluptatibus. Quia veritatis ipsum aliquid consequuntur tempore. Molestias animi dolorum ipsam labore. Aspernatur nisi libero mollitia. Repudiandae tempore vero non id.

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