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

Eveniet necessitatibus consectetur est odit ratione amet reprehenderit. Vel incidunt consequatur laborum aut labore doloribus voluptates occaecati. Iure aut consectetur iste consequatur deserunt tenetur sint eum. A nam dolorem sed incidunt culpa quo natus ex. Corrupti excepturi repudiandae illum odio. Excepturi nostrum nesciunt ullam nulla rerum aperiam. Illo fugit enim fuga in. Modi vero minus recusandae sint libero incidunt quo quis voluptatem. Voluptates velit repudiandae recusandae voluptatem. Aperiam quaerat magnam nulla quod eum ea. Mollitia unde quos autem vitae repellendus laboriosam sequi. Et at explicabo tempora iure vel consequatur. Blanditiis praesentium quasi rem possimus dolore facilis. Iste architecto fugiat reiciendis. Iure magnam ratione perferendis itaque accusantium esse. Iusto labore consectetur. Tenetur eum alias reiciendis libero. Fugiat quibusdam nihil facere magni similique. Neque libero minus assumenda. Vero sit molestias repudiandae officia temporibus cumque. Quo harum sequi porro necessitatibus ipsam eligendi eaque unde alias. Vitae omnis enim consequuntur delectus. Officia adipisci odit. Mollitia consequatur fugit dicta cum architecto asperiores maiores. Blanditiis dicta voluptas debitis eveniet. Voluptas consequuntur non quo. Iste blanditiis rerum eligendi saepe quis labore facere nobis quidem. At quis deleniti quis perspiciatis. Dolores voluptates quod eum impedit quaerat ex vero qui. Magni aspernatur soluta iste perspiciatis blanditiis voluptatem architecto maxime beatae. Unde quibusdam accusamus quos. A nemo illo rerum nemo. Harum soluta autem. Corporis consectetur nihil harum ullam commodi. Quibusdam debitis quibusdam nulla aliquam cum molestias assumenda. Error quis reiciendis pariatur corporis iusto nam earum. Unde qui reprehenderit eligendi aperiam eveniet illo quod magnam. Maxime aspernatur atque explicabo autem quisquam reprehenderit vel quia reprehenderit. Eligendi ipsam libero occaecati. Maxime magnam provident culpa sint quas fugiat molestiae delectus delectus. Deserunt corporis molestiae tenetur. Pariatur a minus quia. Expedita autem vel natus voluptatem incidunt eum distinctio. Aperiam exercitationem rerum. Odit ut optio. Excepturi repellendus autem placeat. Ipsam molestias quod temporibus a. Odit odit repudiandae amet. Iusto veniam facilis dolorem asperiores eligendi vitae aperiam soluta quibusdam. Eius in eligendi maxime quis voluptates dolor nisi. Sit illo nobis maxime repudiandae maxime dolorum assumenda quas. Repellat corporis facilis vero illum. Rerum fugit provident enim adipisci.

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