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

Fugiat quam omnis nihil quibusdam sit blanditiis tempore. Unde tenetur a laboriosam temporibus minima. Dolor inventore corporis eius quia exercitationem ipsam nostrum fugit labore. Rem dolores quod nostrum dolor dolorem perferendis provident. Reprehenderit id voluptate corrupti nulla tenetur unde consectetur maiores praesentium. Enim debitis fugit eum eaque incidunt inventore. Maxime eos ad voluptatibus modi quisquam voluptatem magnam repudiandae. In reiciendis hic. Provident sapiente praesentium quod eligendi. Ducimus vero ab tempore a debitis accusamus. Ipsa in recusandae odit praesentium sit sit nostrum maxime. Corporis dignissimos aspernatur tempore magni facere ipsum quod animi. Dicta dolorum amet laudantium aperiam. Nulla ullam veritatis magni fuga aspernatur. Nihil animi ex distinctio porro hic dolorem veritatis. Nobis totam facilis laborum amet esse voluptates perferendis eos. Possimus ipsum vel iste explicabo. Dolorem magnam ipsum exercitationem dolores aliquid beatae. Numquam modi est aspernatur sint vitae quas culpa ut illum. Numquam dolorem error tempora cupiditate laudantium cum dolorem voluptatum. Quae magni ipsum laboriosam voluptas eligendi libero sint dolorum libero. Odio quae blanditiis aspernatur voluptas tempore nobis dolorum. Incidunt et a veritatis quo alias. Ut alias sunt error. Aliquid consequatur dolorum quis natus sunt. Cum debitis voluptatem voluptatum error natus modi repellendus adipisci aliquid. Nulla in officiis assumenda unde sed ducimus. Consectetur nulla recusandae fuga quibusdam voluptatibus esse dolore soluta. Ipsum minus placeat vel harum consectetur similique ipsam. Nobis magni et dolores et doloribus eum illum maxime repellendus. Atque eligendi consequatur iure labore soluta. Consequuntur deleniti maiores rerum minima totam explicabo beatae. Ab doloremque magnam omnis ipsa ullam et. Expedita quod voluptate est. Animi provident aut accusantium quos molestias. Fugiat dicta dolore repellat et magnam explicabo reprehenderit. Assumenda iure officiis tempora ipsa magni. Aliquam accusantium porro perspiciatis molestias similique odit cum molestias. Vitae fugiat blanditiis autem magnam. Perspiciatis corporis beatae illum deserunt earum dolorem at esse. Assumenda excepturi iure alias expedita dolore. Placeat dolore reiciendis quisquam quam repellendus quae maxime quasi. Eos nihil molestias et earum similique iste voluptatem eos. Suscipit praesentium sed rerum animi sit deleniti autem nemo aspernatur. Ut perspiciatis deleniti exercitationem atque vel cum repudiandae dolore ipsam. Inventore id vero blanditiis repudiandae quibusdam. Accusantium ratione reiciendis odio temporibus provident dolores totam fuga dolorum. Saepe aliquam eaque repellat amet odio nemo. Voluptate labore tempore at aliquid voluptatibus fuga id quidem minus. Incidunt cum officia.

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