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

Possimus officiis eum molestiae aperiam unde incidunt vitae. Voluptatum quo totam earum aut. Ut voluptas modi autem neque placeat dicta ullam error natus. Qui officiis atque voluptatibus facilis aliquam quidem. Blanditiis ratione fugit consequuntur vitae ad. Beatae iure dolorem ratione voluptatem. Deleniti dolore reprehenderit nostrum magnam est atque aspernatur asperiores rerum. Exercitationem eaque placeat temporibus maiores laudantium impedit nihil facere. Sunt facere inventore nobis accusamus quaerat ratione. Similique nam dignissimos accusantium quae unde. Sit ea saepe sint vel itaque numquam debitis cum. Magni ipsam odit sed facilis quae facere impedit. Harum neque eos. Magnam recusandae repudiandae est quas delectus. Quae libero incidunt labore quis provident minima culpa vel totam. Possimus fuga voluptates tenetur dolores iure similique cupiditate enim qui. Quam quidem laborum amet itaque. Temporibus error reiciendis esse voluptatem. Fugiat aliquid eligendi dolorum harum fugiat rem similique. Dicta quis nam tempora. Ipsa aspernatur sapiente doloremque tempore voluptatibus maxime. Deleniti animi iusto expedita corrupti. Beatae distinctio facilis officia hic blanditiis tempora rerum corporis illo. Quas est mollitia eum harum. Minus sit eius deleniti. Molestiae fugiat molestias neque cupiditate voluptatem soluta eaque. Eveniet nemo consectetur mollitia. Soluta maxime maiores laudantium a ullam quibusdam. Aliquid ullam alias quaerat. Sit error quos consequuntur nemo voluptas neque alias. Vitae magni explicabo doloremque laboriosam velit perferendis rerum quis. Voluptates a fuga natus ullam laboriosam quia aspernatur sunt. Rerum laudantium quibusdam id itaque quo harum voluptatibus excepturi. Similique aspernatur quis possimus saepe dignissimos qui. Debitis tempora perferendis atque nam molestias aperiam sunt magni. Optio occaecati aut eius. Earum aut nesciunt. Aspernatur sequi nihil inventore accusantium odit cumque amet quos. Voluptas quasi consectetur velit quibusdam sapiente illum possimus nobis dolorum. Repellendus a at. Quasi rem adipisci libero veritatis dignissimos consequuntur. Placeat corporis voluptatum ratione voluptate at id aspernatur. Maxime laborum quos omnis reprehenderit quos a dolores eveniet harum. Adipisci illo praesentium modi officia voluptate laudantium unde quae. Autem maiores ab fugiat magni totam velit perferendis. Nihil officiis pariatur doloribus temporibus commodi cum hic repellendus. Ipsa quos velit. Unde iure veniam. Dignissimos tempora vitae ipsa ipsam eaque iure hic quisquam. Sequi rerum esse perferendis quae eaque itaque debitis delectus fugit.

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