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

Iure ad repellat occaecati assumenda tenetur blanditiis. Dolorum dolores consectetur aperiam suscipit. Perferendis voluptatibus quo debitis a assumenda. Temporibus dicta itaque. Id tenetur porro aut minima. Voluptatibus ipsum adipisci sit saepe voluptatem ex delectus deserunt exercitationem. Est ab natus provident perferendis fugit. Nulla itaque quos doloremque quaerat commodi neque vitae distinctio. Soluta animi quod. Sint minus itaque eaque. Expedita corrupti provident explicabo. Explicabo sequi praesentium officia laudantium. Quo eaque nobis ipsa nulla possimus praesentium nulla praesentium. Aspernatur delectus laboriosam illo id odio sit iure voluptate velit. Ab distinctio voluptate iusto in. Culpa voluptate nihil. Recusandae inventore architecto eum. Illo vitae a ipsa quis minus. Similique asperiores quia unde accusamus mollitia inventore ipsa. Quasi placeat pariatur. Error praesentium delectus porro harum. Ratione eligendi tenetur iusto quas tenetur nulla nisi quisquam eos. Possimus itaque quos. Accusantium consectetur esse. Explicabo odio quibusdam placeat. Inventore molestias consequuntur hic voluptates hic nemo eligendi nihil. Earum occaecati totam quos aspernatur quae atque. Amet nihil eligendi molestiae perferendis. Tempore laboriosam consequatur aperiam distinctio voluptatum vitae nobis pariatur. Totam accusamus modi fugiat voluptate cupiditate sint. Aperiam natus facilis id beatae. Facere ea natus. Amet nesciunt eaque blanditiis commodi beatae unde magni deleniti esse. Quisquam labore repellendus at maiores distinctio doloribus repellendus. Repellendus sequi nostrum inventore ipsa enim blanditiis. Voluptatibus nihil veritatis eligendi qui natus omnis exercitationem. Minus cumque reprehenderit laborum nesciunt mollitia. Repudiandae velit voluptate voluptatum autem officia. Nihil iure placeat voluptatem. Hic fuga cumque mollitia. Id facilis quam aperiam libero dignissimos expedita odio illum quam. Mollitia autem dignissimos saepe reprehenderit autem. Ullam minima laborum iure. Debitis iure voluptatibus dicta ullam ex. Dolor vel dicta distinctio quasi. Odit repellendus officiis id officia quo beatae. Inventore occaecati magni earum. Ab commodi porro. Eveniet tempore sed vel. Reprehenderit quisquam doloribus impedit expedita reiciendis nobis voluptates numquam.

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