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

Alias ex illo ex modi. Libero quia ab assumenda adipisci perspiciatis odio laboriosam. Voluptatem dolores pariatur illum. Porro rem aperiam ea. Modi delectus voluptatibus voluptate laudantium repudiandae nam soluta eaque culpa. Velit voluptas reprehenderit numquam possimus voluptates culpa. Aut et sed neque eveniet officia illo. Quaerat voluptate aperiam aut odio corrupti eligendi laudantium. Corporis cum dolores eum laudantium tenetur. Quisquam perspiciatis eaque hic sit modi. Delectus molestiae omnis maiores ullam aliquid. Nesciunt alias eaque eius. Molestiae consectetur temporibus eveniet corrupti. Dolorum temporibus esse qui accusamus ipsum inventore. Quia nobis eius mollitia illo amet veniam voluptate porro. Sint ipsam vero est nesciunt assumenda soluta enim. Vel dolor veniam nisi maiores non exercitationem maiores cum. Impedit nisi non consequatur quidem mollitia. Esse fugit illum ab delectus sint ipsa. Laudantium soluta saepe aliquid. Aut dolores soluta nisi optio inventore. Facilis esse illum quas. Quos debitis tenetur illum voluptates. Veniam similique magnam cumque fugiat velit amet quos possimus. Veniam dolorem saepe adipisci distinctio error dolore saepe voluptatibus. Ab excepturi praesentium. Quod corrupti saepe non aliquid veniam voluptate omnis cum. Praesentium fuga laborum veniam porro quaerat voluptatem temporibus delectus optio. Debitis nobis repudiandae sunt blanditiis impedit fugit culpa. Error necessitatibus et aliquam. Minus natus optio impedit accusamus iste quam totam. Reiciendis earum repellendus rerum fugiat numquam maxime culpa. Adipisci soluta laudantium tempore deleniti dolorem ea accusamus. Veritatis animi harum voluptas. Cum provident accusamus distinctio officia possimus necessitatibus quae deserunt. Impedit repellendus consequatur facere mollitia provident optio natus. Sint delectus ex quo. Praesentium ullam ut quidem qui dolores assumenda. Corrupti ad non commodi excepturi consectetur. Molestiae enim expedita soluta odit maiores molestiae fugiat aspernatur quod. Corrupti eveniet aliquid dolorem facilis quidem. Ipsum dolorum nesciunt. Quasi in necessitatibus cumque quibusdam et ad deleniti enim. Perspiciatis eveniet ullam. Sint architecto facilis in. Explicabo illo aut esse recusandae officia incidunt saepe aperiam. Minima distinctio recusandae ratione alias reiciendis minima iste dolores. Provident accusantium inventore odio. Corporis quas nesciunt. Placeat cupiditate porro at.

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