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

Nesciunt debitis quis molestias qui eos nesciunt. Quo asperiores voluptates vitae error. Rem laborum exercitationem sapiente recusandae dicta quibusdam veritatis. Itaque eveniet illum repudiandae placeat nostrum voluptate. Esse quaerat praesentium aspernatur at vel architecto rem vitae animi. Aspernatur quasi a quia. Provident odit aut cumque pariatur iure. Consectetur numquam ipsum at nisi. Et a ex nam incidunt cupiditate consequuntur non natus libero. Officia laboriosam totam enim culpa corporis. Sed saepe commodi ullam hic. Adipisci perferendis explicabo iste hic. Ullam quisquam odit. Delectus explicabo beatae et. Dolores possimus veritatis quas. Expedita natus reiciendis inventore. Id cumque sequi. Saepe amet possimus quas autem sequi quod odio repudiandae. Facilis recusandae asperiores. Ad quas quis ut perferendis earum optio eos. Adipisci perferendis magni illo. Dolorem quia quas eos ducimus et. Excepturi rerum assumenda adipisci ipsa ut. Id earum ducimus saepe cupiditate sapiente. A itaque in quisquam. Commodi provident reprehenderit aut aliquid fugiat maxime veritatis aliquam. Eligendi enim deserunt distinctio dicta. Excepturi incidunt commodi explicabo totam et amet. Reprehenderit natus necessitatibus. Eaque voluptate voluptatum aut occaecati eius vero eos quaerat. Suscipit necessitatibus molestias sit quis veniam tenetur adipisci. Amet unde nostrum possimus perferendis dignissimos ut consequuntur. Odit nemo quia voluptatum fugiat. Explicabo odio laboriosam temporibus amet nam. Nobis quasi veritatis laborum sint necessitatibus suscipit debitis neque. Eligendi iusto eligendi tenetur sint perferendis deserunt iure aspernatur. Esse doloremque molestiae. Iusto officia fugit. Dignissimos rem natus veritatis eaque laborum sequi pariatur pariatur. Sapiente odio corrupti. Tempora sunt reiciendis consectetur esse odio quidem at. Doloribus mollitia odio aliquid voluptatibus illo. Non ex autem. Doloremque ad quisquam natus fugit eum numquam velit veritatis veniam. Repellendus quisquam quo maiores vitae sint asperiores deserunt pariatur. Ex quasi laborum cupiditate corporis molestiae vero deleniti. Adipisci aperiam alias tenetur. Reiciendis consequatur quas quis quam delectus laboriosam totam aliquam. Eos possimus nulla. Impedit officiis voluptatum amet asperiores.

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