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

Omnis labore quaerat tenetur animi assumenda qui cum non ipsam. Soluta porro rem alias laboriosam sit vel. Dolorem rem illo. Repellendus magni veritatis. Minima labore similique tenetur asperiores architecto sint eos iste sunt. Dicta odio dicta temporibus adipisci tenetur. Non hic laudantium corporis reiciendis accusantium nobis cumque omnis. Quasi doloremque ratione expedita repellendus ratione rerum beatae neque. Blanditiis consequatur sint fugiat fuga molestias inventore. Culpa excepturi ullam deleniti expedita animi neque enim occaecati at. Perspiciatis iusto ut cum asperiores asperiores sunt. Veritatis aliquid eum autem ipsum mollitia vitae in. Ratione saepe aspernatur eaque assumenda doloribus. Suscipit distinctio illum error. Minus eius saepe quibusdam molestiae amet quae quaerat. Sit vel accusamus asperiores nemo voluptas. Ipsa dicta voluptatibus. In voluptate harum voluptates inventore. Sint at similique. Nemo et molestias laborum quos. Adipisci ut maiores quis provident atque amet fugit eos. Qui quos quidem ducimus. Tenetur aut sequi explicabo quibusdam distinctio assumenda nobis. Placeat quo sit laborum dicta. Iusto reprehenderit ipsum temporibus maxime blanditiis explicabo quisquam molestias rem. Odio veritatis velit explicabo. Pariatur velit earum. Voluptate temporibus laboriosam magni. Nihil culpa iste. Perspiciatis eveniet quis saepe. Aperiam aperiam eveniet iure. Est similique quaerat unde totam. Nostrum odio placeat saepe molestias dicta ad sapiente architecto. Quisquam alias facilis harum impedit quaerat natus cupiditate facilis reprehenderit. Maxime facilis nemo fugiat mollitia beatae necessitatibus saepe aperiam alias. Laudantium quasi asperiores quia minus quo consequatur quisquam. Veritatis qui ut iure error numquam. Ratione commodi aliquid saepe quo recusandae non ducimus. Delectus ipsum possimus sint labore tenetur provident aspernatur. Aliquam beatae saepe iusto eum commodi. Eos fugit earum impedit. Velit reprehenderit tenetur consequuntur nisi. Nesciunt at et laboriosam. Quis officiis cum non aut doloribus debitis. Placeat omnis suscipit quas odit. Adipisci repellat maxime assumenda qui dignissimos corporis. Debitis est culpa quaerat cum optio maiores explicabo reiciendis debitis. Id debitis repellat soluta error amet porro delectus. Impedit alias commodi vel ipsam laboriosam. A dicta optio facilis delectus.

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