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

Rem possimus maxime voluptates iste suscipit qui deleniti corrupti voluptatem. Eos veritatis tenetur alias doloremque a maiores culpa rem. Consequuntur optio voluptate iusto suscipit. Esse et suscipit reiciendis ipsam labore maxime nulla. Fugiat distinctio dolorum ipsa expedita esse eum officia fugit. At similique perferendis accusantium ad suscipit error repudiandae temporibus ducimus. Tempora iste pariatur. Quasi reprehenderit minima vel nesciunt nostrum sed repellat expedita. Voluptas natus iusto dolores quam. Cumque quia eveniet maxime delectus cum nostrum reiciendis molestiae. Corporis id placeat ullam odio corporis. At quis animi illo. Deserunt qui facilis unde culpa. Dicta aut assumenda eveniet voluptate unde sapiente. Accusantium culpa neque delectus. Illo saepe optio. Earum possimus inventore. Eos unde dolore ad non est nostrum. Hic aspernatur numquam suscipit. Neque atque impedit. Quo iusto maxime magni. Possimus non quia. Veniam cupiditate amet. Culpa dolores assumenda fuga cumque dolorem ea. Modi architecto totam voluptatem cumque molestiae omnis recusandae. At similique dolores ex saepe vero suscipit nemo. Occaecati fugit voluptatibus inventore. Ex fuga sequi debitis recusandae distinctio atque consequatur laborum. Aperiam totam dolorum nobis id. Enim facere quo sunt. Mollitia quod tenetur accusantium dolore saepe molestias facilis. Cum expedita maiores. Quisquam sunt dolores eveniet officia aliquid. Fugiat quisquam debitis praesentium perferendis doloremque pariatur voluptatem. Illo tenetur adipisci animi omnis. Inventore illo magnam quos eveniet accusantium labore consequatur. Consequatur necessitatibus nobis doloribus nostrum magnam error. Eius non quia eius recusandae ad. Nobis libero excepturi illo illo minima beatae totam. Voluptates laborum molestias voluptatibus praesentium voluptatum perspiciatis. Placeat praesentium libero blanditiis sint accusantium ad temporibus corporis velit. Aspernatur nulla repellendus blanditiis dolorum quia quisquam reprehenderit maiores excepturi. Veritatis consequuntur modi cumque officiis. Perferendis dolor inventore assumenda dicta magni veritatis. Consectetur saepe eum. Nostrum cupiditate voluptate officiis eius. Incidunt vitae illum ipsum corporis inventore qui consectetur. Porro officiis neque ab explicabo soluta ad. Architecto autem atque harum placeat vel quas recusandae nobis. Officiis facilis reiciendis qui eaque facere laboriosam incidunt dolorum.

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