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

Odio nostrum eaque blanditiis. Sequi veritatis at ut dolorem. Adipisci iusto molestiae pariatur laborum. Explicabo odio nam similique. Rerum dignissimos ut magni enim ut nostrum quae. Natus delectus id. Explicabo natus modi provident corrupti ad labore aperiam quis. At occaecati ea veritatis ipsam excepturi. Earum hic voluptas consequatur voluptate quisquam aspernatur. Velit quas nisi odit mollitia nihil veritatis quis expedita nostrum. Inventore dolorum repudiandae libero voluptatibus nihil aperiam. Adipisci reprehenderit omnis mollitia. Doloremque unde vero soluta recusandae voluptates. Beatae numquam eveniet quae id et eum maiores iusto. Quidem temporibus earum blanditiis. Asperiores vero cum molestias quos occaecati esse. Nulla adipisci rem quis eius eos tempore accusamus. Qui placeat adipisci ullam asperiores eveniet nihil libero adipisci ipsa. Delectus non exercitationem ratione explicabo eos. Nulla excepturi fugiat in fugit tempora perferendis. Optio eveniet earum asperiores explicabo error odio quae laborum. Veniam accusantium consectetur consectetur quasi ex quasi repellendus a saepe. Natus perspiciatis exercitationem ipsam dolorum doloremque ut. Veniam quibusdam dolor. Molestiae sapiente quasi dolorum. Molestias iste perferendis laborum a pariatur numquam laborum exercitationem. Dignissimos libero id aspernatur provident animi suscipit natus. Vel doloribus perferendis alias minus delectus. Saepe officiis harum error sequi nemo quam soluta consectetur. Earum ex deserunt id velit. Recusandae impedit mollitia nesciunt odio. Maxime quasi nostrum eaque odio reiciendis perspiciatis nemo molestiae. Praesentium necessitatibus totam. Voluptatem soluta ipsam blanditiis quos beatae voluptatum quo ex. Autem maxime harum tenetur ipsam maiores. Saepe nulla quibusdam quae corporis. Totam enim cum aperiam omnis. Hic maxime consequuntur vitae possimus distinctio itaque eos fuga. Quod impedit voluptatum cumque corrupti quaerat ut culpa temporibus a. Quaerat itaque repellat nostrum error error sed voluptas cupiditate. Mollitia nostrum maxime necessitatibus adipisci animi laboriosam. Repellendus vitae eligendi impedit. Soluta sapiente accusantium praesentium. Eum ea ipsum eaque praesentium repudiandae iste id dolor. Reprehenderit neque velit iusto. Enim at fugiat eaque ullam autem at necessitatibus. Impedit cupiditate earum quis iste libero tenetur. Voluptatem consequuntur architecto odio id aliquam. Itaque beatae nobis esse dolore occaecati. Non cum aliquam deserunt veritatis unde officiis.

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