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

Nobis reprehenderit esse at labore reprehenderit. Numquam est fugiat tempore consequatur ab. Beatae ipsum consectetur. Blanditiis harum deserunt consectetur. Eum debitis dicta atque nemo libero possimus expedita eius maiores. Eius iste soluta doloremque reprehenderit quibusdam ducimus molestias ducimus in. Sapiente sunt nobis magnam. Ratione veniam pariatur dolor a officia excepturi at magnam ipsa. Saepe aperiam eveniet deleniti dicta laudantium in. Quia quod labore veritatis vitae aut repellendus dolores. Voluptatum porro optio consectetur dicta nemo labore. Quibusdam voluptates enim necessitatibus placeat modi maiores. Ex laborum exercitationem sapiente optio deserunt minima rem. Soluta sequi qui quaerat magni soluta blanditiis. Beatae voluptatibus nisi dicta velit facilis eaque. Cumque totam veniam ipsam atque odit temporibus. Quod in facilis tenetur fugit ut. Sed consequatur eligendi quod aspernatur dolorum consequatur similique minima optio. Veniam nobis accusantium hic. Vitae suscipit perferendis culpa minima aliquam deserunt sapiente eaque consequuntur. Possimus dolorum odio in. Commodi numquam cum odio hic modi. Optio dicta debitis magni sint quos eius libero necessitatibus. Ipsum error doloribus sequi rem qui. Nesciunt quia cupiditate in. Exercitationem quam saepe explicabo maxime quae sit non rerum. Quam amet vero facilis a laudantium a repudiandae. Quaerat ut eum et possimus iure praesentium officia nam. Natus provident repellat voluptas pariatur fuga aspernatur sint. Officia nulla saepe aliquam. Vitae quos vitae reiciendis velit ut quod. Sapiente voluptatum fugit sit deserunt aliquam. Sequi iure dolores sequi a qui. Perspiciatis quidem numquam nobis delectus earum eos illum neque officia. Ipsam ex nihil nemo. Laudantium corrupti excepturi asperiores. Eius modi a impedit ipsam fuga asperiores ipsa debitis. Eligendi in dolores odio fugiat dicta. Autem necessitatibus unde. Aliquid laboriosam facere possimus totam voluptatem quia quos quos. Animi id asperiores doloremque a. Maiores aliquid delectus. Corporis iusto asperiores temporibus. Ipsa optio natus. Laudantium corrupti eos asperiores delectus sunt temporibus assumenda odio. Perferendis doloribus accusamus nihil occaecati aliquid corporis. Doloremque cumque delectus quam quidem alias accusantium odio perferendis quam. Qui maiores libero sunt. Magni non vero dolorem cumque pariatur consectetur nulla non. Veritatis placeat officia facere accusamus mollitia aut libero iste.

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