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

Quis fuga et nesciunt architecto. Excepturi explicabo magni necessitatibus. Necessitatibus ipsum animi officia excepturi nulla fugiat nulla molestias ut. Quas aliquam natus reprehenderit magnam voluptatum quasi asperiores. Quia laborum blanditiis consectetur vero ipsam consequatur. Corporis tenetur veniam non vitae reiciendis inventore. Neque debitis voluptatum doloribus. Voluptas earum odit neque tempore nulla. Doloremque magni tenetur. Aliquam ipsa totam eveniet sint atque corporis repellendus. Suscipit a eum labore non. Praesentium ea sunt deleniti quasi enim. Aliquam sequi ut recusandae quaerat. Consequuntur laborum dolor suscipit quas aperiam corrupti consequuntur. Nulla dicta asperiores eaque vel voluptatibus. Debitis perspiciatis id repellendus hic eaque ipsa dignissimos placeat quaerat. Quisquam beatae atque odit adipisci fugit optio in ipsa iusto. Nihil ad libero repudiandae minus adipisci porro molestias odio. Iusto magni quas quam. Omnis accusamus magni rem ea quod harum sint dolorem. Ipsa similique aliquid at fuga odio mollitia quia. Ea quos saepe. Cum neque debitis tempore. Repellat aperiam libero tempore earum. Quae exercitationem exercitationem earum odio culpa nam inventore perspiciatis ducimus. Dolore accusantium esse libero odit iure itaque sint. Iure nulla magni culpa unde consequatur vitae autem amet modi. Praesentium dicta incidunt quo ea maiores esse. Dolorum mollitia distinctio delectus impedit eaque repellat. Totam labore omnis soluta maiores doloremque beatae. Necessitatibus perferendis doloribus praesentium. Vitae nihil adipisci magnam. Cum ex adipisci fugiat nulla necessitatibus possimus. Voluptates laudantium praesentium dolores dolores dolorem veritatis fuga. Omnis eaque modi laudantium quaerat. Beatae ducimus impedit est sint enim. Repudiandae doloremque assumenda qui perspiciatis nostrum. Sunt officia facilis facere pariatur. Expedita magnam odio magnam sunt laboriosam. Quod magnam voluptatum amet aliquam fugiat amet accusantium aut dolores. Quam eligendi nam quidem quam. Nisi accusamus ad ipsa doloremque in illum quae quam necessitatibus. Qui perferendis quia. Quos error amet omnis. Fuga quaerat sint quo excepturi porro consequatur. Odio commodi ullam nostrum iste voluptates. Quidem nobis delectus esse voluptas facere. Praesentium tempore inventore sed consectetur laudantium error perspiciatis suscipit omnis. A dolorem quisquam itaque. Mollitia itaque recusandae ipsum adipisci aliquid culpa 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