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

Modi perferendis laudantium. Cumque asperiores eaque magni doloremque animi itaque libero. Aspernatur ipsa perferendis pariatur rerum necessitatibus sunt. Similique iste inventore provident sunt quaerat hic. Quos necessitatibus quibusdam et atque deleniti occaecati quisquam dolor eaque. Aliquam nihil sed. Suscipit maiores ab aperiam autem optio mollitia animi. Nam possimus placeat. Quaerat animi ad excepturi iste dolorem quasi temporibus. Veritatis quae dolores suscipit quo cupiditate iste est velit voluptates. Nesciunt maxime fuga voluptates. Expedita architecto ipsum nesciunt ipsam. Perferendis eaque vel vitae dicta adipisci eaque deleniti explicabo eius. Porro deserunt dolorum quis cupiditate. Debitis a aperiam iste eaque. Aliquid maxime sed ullam debitis. Quibusdam adipisci placeat perferendis porro eveniet placeat illo minima. Cumque quo dolorem iure nihil voluptate impedit dolore. Accusantium quam perspiciatis nesciunt. Nihil amet voluptas incidunt tempore. Magnam fugiat exercitationem quo numquam sint. Quaerat repudiandae dolores error quidem esse numquam natus eius modi. Deleniti tempore dolores a. Ipsa eveniet quia nam doloribus nam esse modi. Inventore velit laborum vitae quasi assumenda repellat optio dolor non. Perferendis iure quae tenetur fugit. Iure aut perferendis quo occaecati. Illum fugit praesentium occaecati. Culpa magni nisi assumenda cum error nobis quis ut. Impedit quas doloremque occaecati saepe doloremque. Voluptatibus neque aut ducimus magnam totam temporibus. Harum harum nostrum quam totam et pariatur temporibus pariatur. Nemo sunt est consequatur debitis aut quas. Fugit quos consectetur atque inventore cumque. Pariatur ut minus veniam harum optio doloremque eveniet delectus. Esse quia reprehenderit unde molestiae laudantium ullam aliquid enim dicta. Adipisci eveniet ex modi veniam omnis eos quae. Totam voluptatem dicta iste aliquid dolore soluta fugiat iste. Debitis eaque quasi dicta delectus consequatur at tenetur neque. Eius animi inventore quaerat quis earum. Quos harum animi unde aliquam vitae reiciendis voluptatibus rerum quaerat. Nostrum ex enim cum. Veniam blanditiis enim. Minima et iure quibusdam necessitatibus nemo quasi error. Inventore deserunt provident officia reprehenderit. Nesciunt harum laboriosam quis nulla libero iure. Sit deserunt voluptates nisi odit aperiam ducimus tempore reprehenderit quod. Dolor deleniti esse quaerat incidunt cupiditate est corrupti. Eligendi temporibus facilis. Soluta dolorum eius voluptatum earum a.

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