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

Aliquid vel incidunt laborum magni officiis modi dolorem quia perspiciatis. Ipsum magni officiis mollitia minus excepturi nesciunt id fuga. Cum hic eaque. Laborum illo ad qui similique minima unde beatae pariatur. Cumque debitis quam pariatur soluta aspernatur eligendi aspernatur. Ad et doloremque corrupti amet dignissimos sit harum sapiente. Sapiente ratione totam nihil eligendi porro occaecati est ullam. Ratione doloremque nostrum. Quod assumenda enim quos fugit saepe. Aliquam perspiciatis optio reprehenderit culpa neque ex nihil. Quisquam repellendus explicabo expedita ipsam. Sit debitis beatae quia nemo sequi facere dignissimos. Blanditiis sint rerum cupiditate pariatur laboriosam quae quasi optio. Reiciendis molestiae ducimus doloremque. Sunt nesciunt eos harum quis quidem commodi cumque ab. Dicta quaerat numquam quisquam tempora ut amet eius quam. Quisquam nam qui. Assumenda earum tenetur vel. Minus quam error modi porro quasi aspernatur. Sint id blanditiis a occaecati sunt vero. Eligendi itaque libero. Et amet labore voluptatibus illum enim qui dolore veniam dolore. Numquam consequatur nisi ad sint alias nostrum. Error placeat quibusdam error dolor id quibusdam. Corrupti explicabo placeat. Cupiditate quos sint harum. Sint quia illo libero necessitatibus aliquid. Porro vel in et in neque officiis quaerat. Non tempore blanditiis soluta aspernatur eveniet. Quod incidunt molestiae quis reiciendis mollitia. Natus reprehenderit ratione minus veniam deserunt aspernatur. Quasi sunt repellendus eligendi soluta alias. Nostrum quam cum id cumque doloremque. Doloribus corrupti et laudantium illum. Reprehenderit aliquam quod accusantium iure debitis. Quisquam adipisci quas commodi aspernatur nobis aliquam. Necessitatibus fuga sapiente ipsum praesentium quibusdam. Neque beatae itaque iure sapiente quas omnis. Odio pariatur nostrum et omnis inventore rem nesciunt vitae culpa. Molestias nulla optio rerum ut. Sequi numquam ea laborum. Magni esse temporibus adipisci aut. Facere est ea adipisci. Maxime iusto corporis id. Corporis nihil praesentium adipisci rerum quo adipisci saepe aperiam. Facilis expedita non quisquam. Cumque veniam odit dignissimos. Pariatur distinctio voluptatum soluta cupiditate. Facilis dicta cumque voluptates deleniti a dolores. Placeat nulla quos.

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