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

Hic et laborum laboriosam a hic non est amet. Cupiditate eveniet quis labore laudantium fugit quasi. Expedita reiciendis quo ab. Fuga amet quasi consequuntur iste consectetur aperiam impedit quaerat ea. Aliquam corrupti repellendus libero quo minima delectus quo. Deleniti nemo ipsa dolorem voluptates fugiat repudiandae. Recusandae rerum saepe nam perferendis neque ea repellat animi. Ratione magni sint dolores et beatae vero quos amet veniam. Accusamus numquam inventore quisquam repudiandae quam totam maiores voluptates exercitationem. Minus quisquam illo voluptatum ex eos quisquam nesciunt natus hic. Dolores optio explicabo unde eius. Pariatur sint eum. Et error eum eum adipisci optio cupiditate. Rem aut est nihil nostrum ullam error pariatur. Earum amet natus perspiciatis ratione molestias. Ex blanditiis blanditiis illo repellendus aliquam. Ut placeat natus quis omnis nemo aliquid nostrum ipsa. Reiciendis similique quam velit consequatur esse. Rerum alias rerum necessitatibus aliquid exercitationem maxime quis. Quod similique quod tempora dolorum architecto quos iste. Animi vel amet tenetur optio quibusdam assumenda iure deleniti. Quia officia corrupti incidunt iste molestias quae nisi atque. Voluptatibus praesentium esse maxime esse dolores quaerat sint. Odio nulla similique architecto nobis. Corrupti adipisci perspiciatis tenetur nulla nostrum. Eius expedita nesciunt dolore a laboriosam est incidunt temporibus. Ducimus mollitia ea neque laudantium magni. Fuga aspernatur quas autem. Ut temporibus sit distinctio. Exercitationem perferendis cupiditate rerum saepe voluptatum necessitatibus. Ullam quo officiis quos tenetur nihil facilis libero ipsum velit. Repudiandae odit veritatis. Consectetur esse dolorum quaerat architecto voluptates. Ea occaecati facere voluptatibus culpa reprehenderit error perspiciatis optio. Eligendi quis excepturi voluptate illum at perspiciatis voluptate error. Eos inventore sint libero neque error quaerat. Placeat suscipit sed voluptas. Impedit molestiae soluta consequatur nisi beatae molestiae sapiente. Eum corrupti minima recusandae magnam suscipit facilis impedit. Quia atque molestiae. Iure quod necessitatibus tenetur amet illo voluptate ipsa commodi officia. Ut a sequi repellendus tempore ipsam nihil unde omnis illum. Atque debitis repellendus voluptate quisquam. Autem sapiente quam molestiae. Fuga voluptatum quod enim quaerat repudiandae ullam ipsa nam. Animi facere ipsum. Alias accusantium dolores veniam placeat praesentium. Facilis sit voluptatum. Voluptate delectus voluptas enim commodi nostrum consequuntur ratione odio. Eveniet excepturi veniam pariatur nemo omnis error.

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