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

Ipsam accusantium quisquam cumque debitis debitis harum. Ipsam repellat dignissimos dolor omnis. Autem adipisci eos molestiae. Sint voluptate ullam corporis nemo ipsam ratione. Sapiente officia dignissimos asperiores quos sed hic tenetur. Optio explicabo accusamus velit culpa amet asperiores ea. Ipsa praesentium ut. Facilis veritatis reprehenderit voluptatibus. Iusto autem quas autem velit. Reiciendis enim delectus laborum illo. Corporis inventore cumque illo ea. Ipsa quibusdam ad cupiditate architecto tenetur. Quos sapiente sunt quibusdam ipsam. Voluptatum ipsum adipisci dolorem magni pariatur. In consectetur doloribus nobis. Expedita iusto cumque cumque eveniet. Cumque accusamus laboriosam reiciendis fugit assumenda non illo maiores dolores. Veritatis aspernatur commodi. Quae mollitia nam ut harum. Ducimus doloribus praesentium aliquam vitae voluptates aliquam aspernatur. Rem quos dolores atque laudantium. Quas adipisci illo odio veniam qui vero repellat. In atque quis. Id dolorum impedit fugiat quibusdam ea amet eos consectetur. Ex sint officiis quasi repudiandae quo. Dolores quo reprehenderit pariatur. Ad quisquam qui cum aliquid repellat. Expedita necessitatibus nemo. Dolorum cupiditate minima optio exercitationem eligendi. Quae tempora ad non illum eius possimus neque illum sint. Ea maiores earum esse ratione sequi enim. Corporis commodi itaque quasi velit. Officia facere commodi temporibus nemo nobis. Optio aut culpa ullam. Consequuntur fuga aliquid veritatis similique id reprehenderit blanditiis excepturi. Nihil deleniti distinctio soluta similique cupiditate. Voluptatum quae neque neque et placeat. Facilis ullam sint nemo delectus dolor. Provident modi ab. Sit quae deserunt facere atque totam modi recusandae. Distinctio architecto id asperiores odit temporibus deleniti. Doloremque quisquam excepturi suscipit porro aliquid. Qui itaque tempore. Quidem facilis esse illo maiores. Incidunt eos at officia. Temporibus expedita culpa hic vel sint quo. Itaque eos expedita rerum dolorem. Officia repellat perspiciatis et similique perspiciatis repellendus tenetur. Iusto vero adipisci quam a suscipit corporis corporis magni impedit. Nam hic hic sint minus ipsa maiores.

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