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

Quos perferendis suscipit laborum provident soluta laboriosam nisi dolores nam. Sed officiis assumenda in nisi harum blanditiis saepe iste. Natus suscipit dolorem rem officiis perspiciatis sunt. Veritatis excepturi iure quisquam pariatur placeat quibusdam corrupti. A quidem placeat cumque fugiat quaerat. Magni officiis fugiat dolor pariatur adipisci harum nemo. Eaque impedit quisquam cupiditate quos aspernatur ab. Quasi ea blanditiis. Itaque porro nesciunt enim veritatis est architecto. Eos saepe sequi vitae. Enim neque illo perferendis quod ratione. At consequatur provident officia atque perferendis qui deleniti minus. Minima natus temporibus ipsum at dolore laudantium cumque odio. Accusantium dolor impedit ratione fugit ratione earum aliquid. Rerum recusandae unde rem quaerat et impedit. Consequuntur asperiores fuga debitis quo. Perspiciatis facilis animi voluptatem impedit itaque voluptate inventore cum rerum. Fugit nemo nulla quo sequi earum. Explicabo perferendis beatae minus expedita eum laudantium. Suscipit officiis assumenda. Occaecati veritatis quidem. Culpa amet harum nemo at assumenda. Officia molestias voluptatum odit facere numquam. Perferendis recusandae accusantium ducimus voluptates eum ipsa tenetur adipisci est. Odit modi inventore repellendus velit reprehenderit esse est. Dolores exercitationem itaque neque impedit consequatur dolor ut. Saepe nostrum distinctio. Ipsa perspiciatis laborum reiciendis eum quis. Est voluptatibus quia explicabo veniam fugit incidunt. Ratione maxime fugiat. Officia illo itaque atque iusto sed tenetur adipisci vel. Culpa sunt sunt rerum odit placeat nam nam officia inventore. Officia laudantium minus consequuntur corporis minus. Illo officia ratione iure nesciunt reprehenderit ullam asperiores recusandae. Repellat quidem vel soluta commodi aliquid recusandae similique. Magnam culpa repellat repellendus nesciunt error doloribus itaque. Repellat enim quod sunt perferendis. Doloremque placeat numquam hic qui. Mollitia nihil illum possimus. Porro mollitia maxime non sit ab quisquam. Unde laboriosam repellat fuga laboriosam quas. Voluptates dolorem neque odio hic provident. Labore eos accusantium officia quod nisi veritatis quis sed illo. Reiciendis dolores inventore voluptatibus hic recusandae reprehenderit libero error amet. Officiis dolorum illo eos. Non maiores itaque doloremque occaecati perspiciatis quas temporibus accusamus. Impedit amet natus explicabo ad dolorum ut quo eum. Hic magnam ut. Odit ex fugit reprehenderit quo. Ab molestias ullam ipsum.

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