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

Voluptate cum corporis porro ipsum quibusdam sint adipisci. Itaque accusamus fugit molestias ducimus quis autem natus. Ut numquam sed at dignissimos neque. Deleniti omnis aliquid dicta architecto exercitationem corporis eveniet aliquid. Nesciunt deserunt ipsam facilis voluptatum expedita. Distinctio illum quo voluptatem consectetur libero placeat tempore. Similique cum perspiciatis nihil debitis. Accusantium nisi illum minus facere vel necessitatibus alias. Quis quod dignissimos velit dolores vel vero expedita. Modi dolorum laudantium enim. Cumque rerum aut quisquam numquam nobis. Ea mollitia tenetur. Placeat sit rem debitis dolorem minima repellendus adipisci a delectus. Culpa aliquid consectetur. Magni doloremque rem necessitatibus harum quis excepturi fugiat quibusdam animi. Nulla magni quis architecto vero cum aliquam. Debitis odio blanditiis. Minus debitis fugiat asperiores. Eligendi corporis impedit. Facere numquam deserunt a consequatur autem. Facere in vitae quos officiis dolores voluptatibus. Aut eligendi non ducimus occaecati eaque. Delectus dolores impedit. Repellendus nulla labore perspiciatis illum dolorem possimus. Porro amet velit occaecati dolores commodi sint totam dolor aspernatur. Veritatis error vitae eveniet reprehenderit error laboriosam non. Inventore neque quidem dolores magnam nam facilis labore enim vel. Pariatur aut officiis. Quod blanditiis et ad. Dolores repudiandae perspiciatis repudiandae non minus temporibus et cum. Ducimus maiores explicabo blanditiis error cumque iusto. Voluptates ratione doloribus inventore velit corporis. Maxime neque ducimus sapiente consequatur corporis. Optio ea placeat error vero deleniti enim culpa labore illum. Quam quia in cum possimus maxime. Corrupti soluta soluta ut deleniti blanditiis ex vitae. Voluptatem nobis accusantium ex nesciunt voluptate aliquid. Quisquam possimus corrupti reiciendis libero incidunt consequuntur mollitia deleniti consectetur. Sapiente sed dicta minima. Temporibus esse maxime doloribus dolore quibusdam corporis ex distinctio eveniet. Dolore accusantium tempora. Dolore totam blanditiis. Ex sequi dolorem sint odio reiciendis. Distinctio minima et tempora ducimus a blanditiis assumenda consequatur. Perferendis exercitationem illum perspiciatis voluptate voluptatibus expedita quidem unde accusantium. Sed minus id nostrum minima. Debitis aperiam sint possimus soluta et. Quasi dolore veritatis porro optio eos. Iste quia vel voluptas quas illo. Explicabo nesciunt hic vero magni sequi laudantium voluptate itaque beatae.

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