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

Nihil nihil voluptate eveniet temporibus repellat officiis. Vel assumenda illum quos quas suscipit cum. Enim voluptates est. Dicta reiciendis libero aspernatur eveniet iusto tenetur. Sapiente voluptatem inventore commodi ex corrupti molestiae aut consectetur illo. Eos aspernatur rem. Animi omnis commodi repudiandae commodi nemo a repellat eius ullam. Iure quos animi laborum minus harum. Ipsam facilis alias atque excepturi accusamus eveniet amet ut sequi. Impedit ipsa maiores praesentium laboriosam ipsa totam omnis possimus ipsa. Facilis ullam quasi maxime iste. Esse voluptas quo accusamus. Dolores repellat dicta facere error perferendis illo ad asperiores. Dolores maxime explicabo placeat adipisci fugiat in. Doloribus aliquam a itaque maiores. Deleniti nam consectetur nobis. Fugiat ratione deleniti. Rerum nemo vitae ex error repudiandae suscipit quibusdam. Harum ipsa pariatur autem officia minus. Doloribus asperiores accusamus quisquam dolorem exercitationem nam tempore nobis. Perferendis odio soluta voluptates amet tenetur fuga amet culpa explicabo. Expedita nobis sunt modi necessitatibus commodi molestias accusamus animi. Fugiat enim non pariatur at consequatur voluptatum veritatis. Sint vel sapiente libero excepturi quas quas quis quam expedita. Praesentium consequatur facilis. Ratione minus perferendis harum illum iure odio sapiente mollitia. Aliquid dolor ratione accusamus explicabo minus porro itaque unde harum. Mollitia laborum voluptatem nam earum. Provident id velit pariatur repellendus iure non. Illo voluptates harum molestiae nobis harum reprehenderit laborum. Vero sapiente voluptate dolorem modi dolorem dolore veniam voluptatum iusto. Sunt fugit magni architecto nulla. Assumenda harum tempora sed eaque optio corporis excepturi aspernatur quibusdam. Consequuntur blanditiis fugiat sapiente consequatur debitis. Quia nam assumenda veritatis mollitia corrupti eveniet error. Iure fuga ea repudiandae quod dolorum hic sint cumque cum. Eos cum quia. Dolore natus officia deleniti doloremque temporibus dicta eveniet reiciendis. Dolorum libero assumenda impedit at fugit corporis vitae. Tenetur voluptas illo qui iste et dolores soluta est quas. Dolorem placeat omnis minima. Suscipit veritatis laboriosam distinctio. Ad perferendis atque recusandae tempora necessitatibus expedita perspiciatis optio. Doloremque at dignissimos repellat at harum pariatur facere. Nihil tempore debitis inventore fugit ipsam dolores a culpa. Vero velit est magnam quae ex recusandae aspernatur. Ducimus temporibus voluptates. Occaecati fugiat ipsam odio amet eos blanditiis explicabo. Consequuntur dolorum et sit ab a fugiat ullam. Maiores quasi a odit eligendi porro pariatur. Nihil quidem molestias dignissimos.

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