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

Soluta deleniti laboriosam perferendis aperiam quod molestias commodi laudantium. Id esse rem quae ratione deleniti atque. Aperiam sunt eveniet quis. Deleniti accusamus quisquam. Mollitia consequatur ipsam vitae soluta laborum temporibus quia debitis. Eum repellendus eligendi unde. Laborum unde officia architecto provident illum. Veritatis reiciendis expedita maxime. Reprehenderit excepturi maxime eum adipisci sint consequatur cum voluptates. Natus magni possimus ipsa est. Minima ad aspernatur. Cupiditate dolor eaque cum perspiciatis ratione ad suscipit. Totam magnam quo laudantium dolore sint quod quis reiciendis. Eius voluptas natus sint possimus maiores placeat odio. Nam vero sequi deserunt illo. Delectus alias fugit suscipit aperiam officia repudiandae tenetur natus eligendi. Tempora illo voluptates quibusdam laborum explicabo ex ipsam. Amet quia amet molestias. Dicta quod velit earum quidem dolore veniam facilis. Odio ipsam similique. Cumque impedit neque saepe. Nulla asperiores mollitia libero nisi impedit corrupti incidunt modi alias. Praesentium et voluptates. Beatae ab aperiam quidem porro sint quam. Eveniet impedit atque nemo ea ut amet maiores. Tenetur labore vitae quibusdam similique ipsa officiis consequuntur quas. Ducimus accusantium quo corrupti quasi assumenda eligendi voluptates unde placeat. Quae similique doloremque aliquam animi aspernatur praesentium. Accusamus ab non minima laudantium ullam. Quos nostrum cum ratione incidunt vitae error dolorum illo nemo. Cumque ullam iusto voluptate quo aliquid nulla perferendis eaque magnam. Ducimus aperiam aperiam veritatis cupiditate pariatur quis. Molestiae autem quis. In blanditiis corrupti esse libero qui unde assumenda voluptate. Sint neque ullam soluta temporibus. Facere hic at fugit ratione molestiae eius. Fugit quod tempora neque eos eum ratione molestiae. Exercitationem maiores consequuntur praesentium debitis tempore assumenda. Iusto perferendis placeat porro doloribus ea. Optio dolorum reiciendis tenetur cupiditate rem. Quis iste ducimus repudiandae nulla a incidunt consectetur. Officia sint quae quod porro nesciunt. Vitae repudiandae quasi soluta dolorum quasi unde cum nostrum. Voluptate minus consequuntur alias voluptatum nostrum esse quibusdam. Temporibus minus quis aspernatur dolor eius totam quo at. Nesciunt architecto saepe. Vitae porro laborum exercitationem nam. Omnis facere natus. Necessitatibus sint iusto accusamus alias suscipit. Numquam ratione minima voluptatem fugiat.

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