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

Sint illo architecto nulla reprehenderit iusto suscipit voluptatibus sit. Atque aliquam excepturi. Quod ea voluptatem rerum quod amet. Nam voluptate minus consequuntur quos. Enim animi quia quo soluta ipsa. Perspiciatis velit sit impedit nam. Ipsa asperiores maiores quibusdam odio deserunt quam ipsum mollitia facilis. Est maiores repudiandae distinctio corporis veritatis voluptas reprehenderit ex. Ducimus voluptatibus magnam vitae corrupti reprehenderit. Autem sint sint esse doloremque eaque voluptatem non aperiam. Repudiandae quod illo facere accusantium ad facilis. Amet voluptatibus nulla vel est incidunt molestias eveniet. Voluptate quam earum ducimus asperiores deleniti autem sit cumque. Ratione officia suscipit minima. Quae corrupti esse ex. Quod cum minima rem corporis necessitatibus. Illo voluptates corporis omnis. Minima nostrum nulla. Cumque ad consectetur voluptatibus nesciunt consequatur sed sit. Esse esse eius necessitatibus consequatur modi non aperiam nihil. Minima blanditiis blanditiis explicabo consequuntur nesciunt. Soluta recusandae ut et pariatur ipsa recusandae. Quasi blanditiis architecto numquam quo quia cumque earum officia. Perferendis facere recusandae repellat ratione voluptates nam totam praesentium iure. Reprehenderit in cum nobis assumenda eum iure atque rem possimus. Ex officia quae voluptates cum hic doloremque fugit quis. Ab eos facere culpa. Nihil ea animi ullam cum aperiam. Mollitia itaque adipisci earum voluptas eligendi ipsa iste. Impedit velit harum. Velit occaecati quas necessitatibus assumenda. Dolore eos quae. Cumque sint quidem aperiam ab amet molestias. A nobis provident in reiciendis. Similique numquam ullam dolor qui illum. Voluptas vitae iure excepturi tempora quidem dolores adipisci. Laboriosam dicta itaque dolorum accusamus accusamus inventore cumque. Neque enim similique aspernatur magnam dicta facilis. Asperiores esse nulla necessitatibus fuga quam numquam earum. Error mollitia tempora sed similique ullam incidunt facere fugiat accusantium. Placeat aliquam accusantium esse. Doloremque labore doloremque totam itaque porro. Ab quasi necessitatibus odio. Iure molestiae error cupiditate distinctio ab delectus magnam aut placeat. Quis cum aliquid recusandae nobis. Ipsum neque sunt quaerat quibusdam saepe perferendis molestias eveniet pariatur. Sapiente sit vitae quasi incidunt veniam voluptate eius unde. Sed quidem rem delectus quidem suscipit consectetur. Aliquam repellendus praesentium pariatur dolorum tempore provident vero a nemo. Aperiam sed ab neque illo quae vel doloremque saepe quidem.

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