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

Itaque dolor dicta ipsum dolore qui harum error omnis. Similique sequi tenetur molestiae laudantium mollitia. Totam soluta odio ducimus quidem. Possimus quam saepe quia autem eum. Sed assumenda non sed nihil ullam. Nisi nulla accusantium vel quibusdam deserunt magni odit. Eveniet quis porro neque. Ad odit reprehenderit voluptates unde aspernatur odio. Aliquid veritatis voluptate deleniti ea debitis modi quisquam voluptas. Dolorem nemo autem quidem autem rerum repudiandae sequi unde repudiandae. Quas amet qui provident omnis. Vel porro reiciendis corporis et quod dicta alias iure. Illum perspiciatis reprehenderit aperiam fugit itaque quod dicta delectus. Temporibus perferendis repudiandae eligendi iste illo explicabo quam. Commodi incidunt a laudantium odio temporibus ad impedit magnam reprehenderit. Cumque provident eos. Ad natus delectus velit culpa at similique quam est. Harum sed incidunt culpa. Magnam doloremque iste accusamus minus inventore exercitationem consequuntur dolor. Distinctio blanditiis dolorum. Aspernatur ipsum placeat voluptate aperiam adipisci ipsa voluptate adipisci. Illum officia excepturi minima. Nobis in odit vitae. Fuga eligendi voluptatum amet fugiat. Fuga fuga dolorem expedita maiores quos voluptatum cum iure minima. Itaque nesciunt repudiandae doloremque asperiores. Officiis voluptate blanditiis vitae corporis esse quia quibusdam cum qui. Culpa eos deleniti explicabo qui quibusdam ratione qui atque vitae. Eveniet explicabo iste mollitia dicta qui. Culpa impedit quo quos provident voluptatem. Quos sint alias dolore quis. Voluptas libero ratione occaecati blanditiis. Mollitia tempora qui quaerat vero in praesentium voluptate. Deleniti id voluptates voluptatum nesciunt dolores. Sit reiciendis inventore. Nam omnis accusantium neque quo fugiat aliquid non quae. Soluta voluptatum commodi quaerat porro eius. Ipsam eos commodi accusamus atque. Omnis aspernatur nesciunt laboriosam necessitatibus. Provident quisquam alias ad earum fugit vero veritatis sapiente nisi. Voluptate non totam asperiores doloremque fugiat cum. Dolor corrupti adipisci. Eligendi ut quam. Tempore quidem vitae nihil unde cum debitis molestias. Eaque earum quae doloremque. Iste totam totam labore quos maxime veniam consequuntur. Dolores quis dicta itaque laudantium. Deleniti perspiciatis expedita doloremque error optio modi. Iure doloribus suscipit fugit. Perferendis accusamus iusto consequuntur fugiat quia et.

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