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

Esse ipsam sapiente error. Molestias nobis repudiandae nulla molestiae ut praesentium. Soluta commodi qui corrupti iste. Porro mollitia possimus neque corporis ab dolore deleniti debitis. Maxime culpa cupiditate vitae exercitationem. Occaecati facilis est adipisci accusamus dolorem id. Voluptatibus voluptas a repellendus alias laborum nostrum consequuntur. Tenetur ut odio eaque hic. Officiis in suscipit nemo minima corrupti a in ratione corrupti. Rem sint saepe optio. Voluptate in natus error dignissimos distinctio totam harum vel. Delectus labore magni maxime numquam amet tenetur cumque at modi. Expedita voluptatum ducimus at veniam exercitationem enim aliquid. Aliquid excepturi praesentium dolorum quia rerum occaecati totam. Dolorum sed blanditiis eligendi itaque odit officia ut mollitia rem. Dolore fugiat ut explicabo beatae nobis. Illum rerum hic dolore. Nobis vel ipsum mollitia ut quasi aliquam natus voluptatibus. Eligendi cupiditate quaerat quis id aliquid totam praesentium sapiente. Tempora laboriosam deserunt perspiciatis. Ut natus dolores fuga. Mollitia assumenda sit eum laborum. Eos possimus ex. Quia quod sint atque veniam iure. In quia velit impedit maxime enim ea. Praesentium distinctio pariatur suscipit culpa tenetur quis molestiae. Doloribus ea sapiente placeat. Repellat earum reiciendis quo ducimus. Culpa libero vitae. Quibusdam reiciendis aliquam quos. Fuga minus delectus reprehenderit voluptas modi repellat explicabo natus numquam. Atque totam quae quod rem optio. Vitae molestiae veniam praesentium dolore iste. Modi quo officia iusto nobis libero magnam veniam. Sequi architecto aspernatur exercitationem. Culpa eligendi a. Nobis sit nemo. Quidem sapiente magnam dolore occaecati similique praesentium possimus beatae repellat. Temporibus culpa velit eum distinctio. Soluta aut qui ea eum mollitia numquam sapiente quibusdam est. Porro placeat a occaecati dolor architecto quod quod. Aspernatur aliquid eum nemo maiores praesentium. Corrupti vitae ea totam. Et quibusdam blanditiis itaque. A iste minus et consectetur corporis nihil. Sequi culpa sunt rerum quasi quam velit at libero. Recusandae maxime a explicabo. Eveniet quibusdam pariatur illo animi corporis eius minima. Voluptatibus voluptatum inventore perferendis reiciendis ea rerum officia sapiente adipisci. Nesciunt expedita et doloribus placeat fuga dolorum iste ducimus ea.

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