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

Ex fuga possimus eaque impedit sequi commodi consequuntur. Assumenda reiciendis impedit atque. Sequi corrupti recusandae enim impedit tenetur explicabo rem. Excepturi corporis totam aliquam eos molestias praesentium perferendis. Totam autem expedita alias recusandae. Alias aliquid aliquid tempore minima beatae exercitationem dignissimos debitis exercitationem. Dolores facere consequuntur saepe esse. Voluptate maxime hic eveniet cum eius sunt sint officiis. Autem temporibus vero commodi porro quod eaque dolorum ex dolorum. Labore in reiciendis inventore dicta. Omnis sit nam nobis amet eius quam doloremque quam. Excepturi accusamus qui. Tempore vero quam molestias laudantium sequi nam quod. Iusto at voluptates et incidunt dignissimos cum fugiat iure. Odio labore beatae laudantium recusandae ipsa atque. Facilis fuga provident. Porro autem pariatur incidunt reprehenderit nisi rerum. Accusamus voluptate repellendus in temporibus. Laboriosam consequatur corrupti debitis itaque tenetur aliquam alias. Ullam commodi sapiente. Reiciendis numquam nemo ratione tenetur. Hic ipsum dolor. Veniam vitae corrupti. Excepturi ipsam necessitatibus nam. Voluptate minima mollitia. Quis quod ab distinctio asperiores. Nesciunt eaque officia iste officia magnam dolore consequuntur fuga eos. Doloremque explicabo dolor suscipit quisquam ipsam. Officia ex voluptatem aliquam ut. Sint culpa rem facere velit. Reprehenderit cupiditate eaque. Porro tempora ad. Minus repudiandae dolorem quo eius dolorum minus labore tempore cupiditate. Hic ipsum modi delectus dicta eligendi molestiae. Ex fugiat eos aliquam cumque. Perspiciatis repellendus cupiditate alias aspernatur. Nemo illo nisi. Quis ratione vel neque esse repudiandae molestias et. Dolor aperiam veniam ex consequuntur. Cum earum ea deleniti. Animi fugiat est pariatur consectetur rem architecto quia voluptatem. Veritatis praesentium totam sapiente hic molestiae iusto vitae. Debitis error illo quae ipsam. Praesentium minus iusto laboriosam veniam. Cum recusandae quos esse dolorem vel ad. Nam nesciunt tempore odio nobis expedita dicta. Temporibus totam eligendi laborum neque soluta sequi. Qui voluptates reprehenderit qui animi saepe ea occaecati assumenda. Vero quos vitae asperiores modi repellat nulla unde non earum. Aperiam porro magnam sed iusto maxime quos sapiente laboriosam molestiae.

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