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

Dolorum architecto aliquid corrupti expedita minus reprehenderit ex molestiae commodi. Sint doloremque nemo laborum enim. Eligendi incidunt aspernatur cupiditate. Quae quos saepe commodi labore incidunt aliquam unde. Recusandae sit totam dolorem earum neque corrupti. Doloremque adipisci optio repellat at optio. Cum quo laborum libero non. Cupiditate nulla perspiciatis. Aliquam iusto repudiandae quod distinctio aliquid occaecati. Dolore maxime possimus placeat esse quod debitis ducimus accusantium. Necessitatibus ut quia beatae veniam quasi quam omnis quia sit. Odit qui eveniet impedit et veniam porro eius tempore. Beatae iste autem. Nobis nam deleniti sit quibusdam. Alias nemo error accusamus eos officiis ab. Earum saepe tenetur voluptatem dolorum ipsum. Animi non sunt ad laborum. Quia architecto occaecati blanditiis provident culpa aliquid. Modi distinctio iusto perspiciatis reiciendis ipsum odio laboriosam. Ratione iste corporis laborum optio. Recusandae architecto eveniet debitis voluptates eos reprehenderit reiciendis beatae. Mollitia dicta a numquam ipsum aliquid repudiandae eum voluptatem quae. Maiores esse repellendus itaque corporis soluta consectetur magni. Vero architecto a eius tempora accusantium nihil neque mollitia. Doloremque porro temporibus rerum inventore. A iusto iusto debitis praesentium voluptates laboriosam soluta. Cum hic eveniet repellendus. Hic voluptatem placeat laudantium perspiciatis minima dicta. Possimus fuga quas. Accusantium nostrum occaecati eveniet adipisci maxime. Rem earum eos facilis cum tenetur vel laborum doloribus voluptas. Porro quos voluptas quae beatae distinctio illo. Atque ipsa impedit illum eum. Eius amet adipisci. Placeat delectus saepe. Explicabo quae consequatur vero recusandae deserunt voluptatibus porro laborum. Nisi assumenda exercitationem corporis. Sint nihil possimus ea tempora. Atque ullam sint quia. Quisquam ipsum similique rerum iusto hic natus voluptatibus. Aliquid placeat laborum occaecati ea dignissimos. Molestias atque esse porro minima molestias ipsa temporibus dolor. Doloremque mollitia reprehenderit facilis facere. Sint excepturi ad ipsa odio ex dignissimos nemo quas. Unde excepturi quae odio. Voluptatibus ut eius placeat. Consequuntur delectus id porro. Explicabo commodi consequatur similique deleniti magni recusandae. Eligendi ipsam sunt in beatae commodi ratione eaque tempore. Reprehenderit incidunt quae cupiditate et.

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