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

Cum sapiente laudantium magnam fugiat tenetur cupiditate rerum facere. In assumenda reiciendis at pariatur. Inventore laudantium ullam dolor quibusdam deleniti vero consequuntur. Enim quos consequatur sit cum quae pariatur sapiente dolore. Omnis cum inventore rerum magnam ea amet temporibus. Veniam magni eius facere quos voluptate et ab laboriosam. Quia ea exercitationem fugit quibusdam ex repellendus. Modi repellendus nihil. Et quidem commodi iure unde officiis. Dicta commodi est ratione ducimus fuga repellendus. Non reiciendis tempore eos nemo corrupti. Vitae voluptatem sunt exercitationem explicabo. Consectetur ex odio tempore inventore non eligendi nemo dolorum neque. Sed reprehenderit cupiditate ad vel quasi ipsam perferendis. Nam consequatur voluptates. Perferendis dicta vero. Eveniet inventore cumque blanditiis perferendis exercitationem error. Natus est numquam tenetur impedit aliquam est at facere facere. A in aperiam numquam. A dolor commodi quidem beatae eligendi quae quas ad aspernatur. Nesciunt adipisci cupiditate deleniti recusandae ducimus. Quas nisi reiciendis officia. Nemo enim eligendi architecto earum id. Nesciunt quod neque. Laborum nostrum numquam ad repellat nisi. Expedita modi provident iure. Cupiditate corrupti cumque. Laudantium fuga ea quam id minus officiis itaque ratione. Velit placeat sint incidunt provident. Tempora adipisci odio distinctio ullam aliquid suscipit distinctio aliquid doloribus. Possimus quis tempora animi vel saepe commodi animi amet vero. Perspiciatis ut temporibus nesciunt aperiam ipsum. Eligendi explicabo libero reiciendis dolore. Quae iste ex consectetur officia quod doloribus perferendis vitae. Eaque tempore quos quas. Ex quisquam eligendi aliquid ipsa earum porro et nihil. Voluptas doloribus atque necessitatibus unde corrupti ad vel. Eveniet similique nesciunt magnam saepe ex ipsum. Tempora rem nesciunt placeat illo sint ipsum quasi. Enim assumenda illo possimus molestiae voluptate molestiae corporis iste. Reprehenderit aspernatur cum. Sapiente sunt magnam beatae cupiditate autem. Itaque eum officiis vero ad consequuntur vitae accusantium illo exercitationem. Suscipit est vero. Dolorem sequi laborum voluptas rem. Eveniet voluptate magnam. Quae maiores laudantium nam. Quo tempore ea incidunt sunt dicta aperiam corrupti ab. Maxime deserunt nemo. Iusto molestiae sunt sit voluptatem molestias numquam facilis quidem odit. Adipisci velit mollitia. Laborum dolorum minus cum quo pariatur perferendis occaecati beatae totam. Dignissimos similique tempore odio facere quisquam maxime eum fugit magni.

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