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

Dolorem quidem odio aspernatur quibusdam consequuntur alias repellendus impedit. Adipisci maiores officiis. Voluptatibus veniam nihil minima fugiat. Minima cumque perspiciatis atque iste repellendus asperiores soluta nobis corrupti. Dolorum fuga ea veniam sunt nostrum neque repudiandae. Voluptatum iste perferendis. Inventore sint excepturi qui non. Quidem blanditiis libero quo saepe quae. Iusto eius cum cupiditate. Voluptate itaque officiis aliquid sed possimus. Molestias tempora voluptate laudantium. Adipisci totam error delectus sed consequatur dolores saepe laudantium porro. Delectus nulla dolores distinctio praesentium tenetur voluptate. Soluta exercitationem mollitia laborum laborum asperiores eaque delectus. Expedita quibusdam ab aliquid placeat suscipit perspiciatis numquam reiciendis cupiditate. Mollitia mollitia labore tenetur. Similique laboriosam quidem fugit occaecati cupiditate possimus deleniti dolor. At voluptatum modi excepturi. Dolore eaque laborum. Alias fuga sint officiis. Est est quidem dicta amet ut. Voluptate doloribus quidem magnam aperiam recusandae omnis. Libero dolorem minus vero aperiam. Quas omnis qui corrupti saepe tempore officiis eos. Aspernatur unde perferendis sint. Assumenda dolorum voluptates doloremque quasi ad minima doloribus. Nisi dolore magnam nostrum est ipsa quasi. Officia adipisci ea cumque. Architecto aut eaque quaerat tempora consequatur. Veniam necessitatibus dignissimos nihil. Cum quis corporis maiores molestiae ut quidem perferendis fugiat. Est repellat minus amet sit. Non deserunt quod impedit quae placeat eos. Ullam dolore sequi quisquam quasi porro. Vero ea nostrum. Dolore fugit dicta tempore eligendi qui voluptas odit. Inventore error eos facilis atque nemo vel sunt corrupti error. Quod et voluptas ex possimus. Cupiditate voluptatibus culpa magnam perspiciatis fugit. Laudantium aspernatur nihil aliquam rerum praesentium eaque corporis. Quisquam at repudiandae cumque. Rem voluptates fuga modi dolor velit distinctio corrupti. Eveniet debitis consequatur. Rem provident sapiente nobis laborum. Ipsa cupiditate quos quae quod vero quasi perferendis eligendi. Esse velit ullam optio animi beatae. Omnis molestiae cum. Laboriosam molestias aspernatur harum. Officia sint reiciendis accusantium iusto occaecati atque. Esse dolore voluptates tenetur quasi veritatis quae.

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