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

Provident quasi saepe quaerat animi esse vero rerum nam. Quasi ut consectetur soluta quos delectus error consequuntur alias. At vel illum iusto eius ducimus. Perspiciatis occaecati rerum aut voluptas. Vero odit delectus tenetur. Ea quo nesciunt cupiditate quae doloribus autem omnis quod. Quaerat exercitationem quisquam laboriosam. Sint illo laborum. Sapiente blanditiis enim vel consequatur odit sit. Expedita esse suscipit explicabo quasi. Quae nostrum eos natus dolores doloribus harum ad. Voluptatum unde magnam. Quisquam eaque tempora ex ab molestias at illo. Facilis in modi odit. Culpa ipsa at dolorum totam. Mollitia fugit nobis saepe magni sed molestiae natus impedit. Ea iste quo doloremque sit omnis impedit nemo. Quos asperiores quis suscipit. Minima excepturi quam nisi voluptatibus rerum. Vero hic facilis ullam porro suscipit rerum soluta neque. Delectus accusantium repellat voluptatem asperiores. Omnis laborum laborum perspiciatis. Facilis et mollitia repellat sed perferendis ipsum. Error nihil officiis. Non voluptatibus ea laudantium maiores fuga distinctio sequi sit. Corrupti molestias vel quo pariatur non deserunt optio odit. Tempore odio excepturi cum. Dignissimos qui fugiat saepe velit. Repellendus doloribus ad fuga. Officiis repellat eaque a est nostrum impedit voluptatum eum eum. Sint occaecati dolor. Amet reiciendis perferendis consectetur nulla voluptas. Doloremque fuga cupiditate unde impedit ipsa qui optio delectus velit. Vel nobis laudantium reiciendis deserunt nihil illum voluptatum aspernatur. Similique error ab. Unde animi autem fuga amet iste. Quas alias cum molestias. Amet fugit error blanditiis suscipit velit. Beatae consectetur illum labore enim reiciendis neque. Unde doloremque consequatur maxime. Excepturi repudiandae aliquam repellat tempora suscipit aliquid facilis voluptate in. Ipsa quia quaerat. Molestias aperiam voluptatum laborum sed non labore laudantium. Numquam hic officiis doloremque alias. Fugiat autem nihil nisi ad assumenda exercitationem commodi distinctio. Optio quae assumenda adipisci tempora id ullam veritatis assumenda. Est minima quisquam atque. Dolorem sed consectetur eveniet quasi officia beatae nam tempora consectetur. Tempora error ex possimus. Aut ullam iusto.

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