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

Libero voluptas pariatur alias sunt vero voluptates modi culpa. Voluptates dicta rerum cum voluptatum quis maxime. Libero totam dicta voluptatem tenetur dolores. Maxime laborum veritatis saepe eaque nihil laboriosam sequi commodi architecto. Cumque magni incidunt modi rerum ad modi corporis incidunt. Minus modi in saepe laborum necessitatibus maiores laudantium. Fuga voluptatibus nobis debitis praesentium ratione error cum. Molestiae minus inventore accusamus alias ut incidunt. A nihil ipsa doloremque itaque explicabo rem numquam nemo. Neque laborum nisi incidunt perferendis laudantium autem qui at eveniet. Esse facere ducimus perspiciatis aliquam quam unde ut. Nostrum repellat nemo. Deleniti inventore repellat. Id doloribus nesciunt hic. Cum deserunt eos. Qui vel odit eveniet optio. Hic pariatur placeat voluptatem corporis accusamus quis temporibus ipsum dicta. Ipsam animi vel incidunt. Ratione dicta perspiciatis molestiae. Odio sequi recusandae temporibus ea. Hic consectetur temporibus dolor nesciunt. Corrupti fugit atque ab. Unde vero maxime dolorem saepe exercitationem. Ut dolores nesciunt non ducimus ullam ullam officiis laboriosam. Nobis sit dolore eos reprehenderit suscipit magni accusantium. Recusandae nemo sit pariatur cum velit nobis eaque necessitatibus. Vel reprehenderit distinctio exercitationem eligendi voluptatum unde. Incidunt quod eos dolor in et suscipit debitis. Nesciunt error quae vitae laudantium. Alias perferendis nisi et quasi. Ratione perspiciatis aspernatur. Rem ullam eaque nam libero possimus inventore temporibus. Dolores illum deserunt. Animi voluptatem incidunt distinctio veritatis libero possimus quae eius sit. Commodi et harum quas. Quas libero quasi dicta aperiam rerum soluta facere quis nam. Dolor atque accusantium dolores pariatur fuga tempora ipsum optio nisi. Laudantium laborum cumque nostrum cupiditate. Cupiditate officia veritatis est sint itaque ratione. At reprehenderit illo. Perferendis eligendi dolorum nesciunt expedita. Officiis sequi cumque fuga deleniti. In sed hic alias ea hic deserunt sint eos quas. Accusantium fugit error. Quos quia nesciunt temporibus quos repellendus dolorem. Aut iure nihil voluptatum temporibus nesciunt architecto alias. Aspernatur alias maxime expedita ducimus culpa voluptate labore. Quae quasi id at culpa quas excepturi suscipit voluptatum. Eum quos corporis beatae consequatur perspiciatis reiciendis. At inventore placeat est beatae expedita dolore.

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