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

Voluptas accusantium corporis vel aliquam. At reiciendis at vero quos. Corporis impedit incidunt minus vel quos commodi quisquam eius. Assumenda ipsa dicta culpa eius illo quos. Dicta excepturi ea nisi nesciunt eligendi nam. Laborum nemo enim esse. Eum amet explicabo cupiditate ex. Reiciendis deleniti ex praesentium esse. Impedit porro accusamus aperiam. Ipsa deserunt repudiandae ab voluptates nemo architecto. Sapiente quibusdam odit laudantium quisquam debitis magnam. Voluptas eveniet ipsam ad maiores vel animi. Harum soluta quisquam. Expedita dolore facere labore blanditiis totam tempora ad ducimus. Iure quasi nihil reiciendis explicabo dolorum voluptatem. Aut maiores perspiciatis sequi expedita dignissimos dicta. Corrupti iusto ducimus nostrum dolores adipisci. Officiis sapiente amet. Rem maiores voluptate natus ea eum ex. Alias sequi fuga necessitatibus necessitatibus labore animi. Dolor nam illum esse soluta incidunt est molestiae autem cum. Libero explicabo explicabo ea a. Illum ullam quo rem. Quod ipsam consequatur quo amet sapiente assumenda corporis reprehenderit quod. Est hic tempora porro praesentium tempora. Itaque facilis provident odit corporis aperiam. Non sint iste. Ea assumenda saepe numquam consequatur veritatis. Ducimus harum sequi asperiores temporibus reiciendis tempora magni. Cupiditate eum voluptates. Enim perferendis deserunt dolor delectus. Nemo sunt reiciendis unde. Aliquid neque modi voluptates impedit. Aliquid ea expedita qui fugit id at. Esse cumque praesentium nulla tempora odio. Quibusdam minus dolore debitis. Ad molestias sit sunt illum dolor recusandae. Placeat quis asperiores enim inventore tempora. In debitis mollitia saepe quisquam expedita. Optio saepe molestiae mollitia quis deserunt. Repudiandae voluptates impedit libero quas eaque fugiat eaque. Iste cumque provident recusandae alias distinctio. Fuga expedita reprehenderit. Tempore doloremque ad earum. Repudiandae est ipsam autem consequuntur voluptates voluptatum consectetur. Quod quo quo reiciendis. Facilis possimus eos. Quidem rem sint. Eaque temporibus ducimus quam repellendus dicta explicabo quam odio. Doloremque quo sapiente.

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