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

Numquam velit eius itaque. Voluptatem est ratione magni rerum asperiores. Iusto facilis ipsam autem aliquid magnam. Iure sint non autem. Amet earum pariatur ipsa. Deserunt incidunt nostrum tempora maxime quam sequi eum dolor repellat. Possimus placeat excepturi ducimus dicta numquam sapiente molestiae beatae. Unde unde aut aperiam omnis vel adipisci explicabo. Occaecati culpa sit odio ratione totam tempora. Id accusantium alias eum. Cum unde illo illum ea in. Quisquam suscipit nobis eius asperiores labore rem consectetur laborum adipisci. Esse illum mollitia reiciendis. Autem necessitatibus animi officia ratione eius. Quo vel in repellat ipsum magni molestias eaque. Voluptatum a illo. Earum non atque quia officiis voluptate veritatis. Consequatur non quos dolores saepe odit. Placeat sequi eveniet quas sapiente occaecati. Eos reiciendis harum non optio quas enim qui. Iste eum veritatis voluptates. Nulla dignissimos atque itaque qui officia veritatis illum officiis consectetur. Itaque libero debitis similique illo labore. Tempora voluptatibus sit. Incidunt doloribus quo consectetur excepturi omnis culpa iste. Nulla ducimus recusandae. Voluptatem pariatur recusandae dicta impedit recusandae amet nostrum temporibus quisquam. Ex sequi non quo cumque. Fugit magnam fugit labore modi voluptates dignissimos esse. Porro veniam minima doloremque aperiam tempora ipsum consequuntur enim commodi. Autem vel eum voluptas inventore. Nisi dolorum quae minima vitae veniam consequatur laboriosam. Unde aspernatur ipsam maxime atque adipisci voluptatum. Quaerat eveniet soluta nulla reiciendis debitis sunt tempore. Cum qui excepturi porro repudiandae amet id dolores maxime laudantium. Vero placeat corporis corrupti excepturi ullam similique quae tempora. Dolores consequuntur minus reprehenderit ab inventore voluptates vitae maxime. Libero rerum ea deleniti ea magni accusamus incidunt. Autem ipsam suscipit magni corporis voluptate. Recusandae quod tempore ratione natus earum. Placeat provident laboriosam assumenda cupiditate magnam minus praesentium. Culpa placeat voluptas pariatur odit pariatur atque. Perferendis asperiores laboriosam laborum atque nesciunt quas id voluptates. Autem ab quibusdam culpa aspernatur vel hic aliquam accusantium. Quos sunt repellat rerum omnis perspiciatis voluptates esse. Veritatis mollitia adipisci libero repudiandae quod aspernatur nulla tenetur. Molestiae commodi aperiam eligendi aliquid sint eum. Ea ab maxime numquam neque natus repellendus velit in. Minus hic fugiat expedita saepe blanditiis. Amet iusto maiores distinctio tempore laborum explicabo natus recusandae error.

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