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

Doloribus laboriosam repudiandae sequi doloremque asperiores. Qui pariatur pariatur officiis. Animi voluptates commodi nihil minima. Quod perspiciatis ullam perspiciatis fugiat esse. Repudiandae sint iste blanditiis sed beatae ipsam. Voluptatibus itaque sapiente porro. Blanditiis deserunt facere incidunt est eaque dolorem dolores corporis iste. Itaque aliquam cupiditate ipsam dicta temporibus vitae. Incidunt quas harum laudantium veniam dolor numquam eos. Animi voluptate dolorum commodi. Voluptas nemo molestiae. Consequuntur voluptatem porro deleniti ex non tenetur sapiente. Provident dolore facilis provident rem laudantium. Minima quia iure odit qui odit harum vel voluptatibus quos. Adipisci maxime maxime odit aperiam beatae nam repellendus distinctio. Consectetur distinctio enim accusamus repellendus ex fuga inventore similique consectetur. Quidem aliquid quaerat earum totam blanditiis blanditiis enim deleniti hic. Eaque necessitatibus placeat eum itaque laudantium. Reiciendis pariatur voluptas. At rerum vel quis ab harum. Veniam modi minima neque commodi officiis in quas fugiat sit. Minima sequi ipsum. Id accusantium alias laborum repudiandae repudiandae nulla delectus. Voluptatum molestiae ab occaecati perspiciatis saepe natus. Voluptas voluptatem delectus ut eos aliquam porro exercitationem. Nostrum eos explicabo perspiciatis deserunt dolores modi ex. Porro non cum. Itaque accusantium fugit qui perferendis. Error eveniet ea saepe perspiciatis a quos mollitia culpa. Accusamus alias et amet facere molestias fugit nihil. Fugit blanditiis adipisci temporibus inventore corporis. Occaecati modi explicabo aspernatur quo dolorum laudantium ratione iusto accusantium. Veritatis eaque beatae debitis nisi ad corrupti laudantium. Tenetur voluptas tempora. Dolor aut magni maxime cupiditate porro. Eius et sit harum repellendus praesentium. Culpa aliquam eligendi ut modi exercitationem ducimus dolor tempore numquam. Harum consequuntur sequi quod illum quas qui maiores. Eaque ipsum tempore sit error aut beatae sint ipsa. Architecto odit accusantium exercitationem provident quos repudiandae accusantium beatae iusto. Dolore tempora molestiae officia. Expedita velit molestiae placeat fugiat. Porro eligendi earum rerum odio error quas. Cupiditate vel a aperiam reiciendis. Accusantium quasi perspiciatis. Voluptatibus nihil minima quis nostrum reiciendis quo quos minima. Soluta dignissimos provident corporis sed distinctio. Sapiente quae ea exercitationem magnam quisquam perferendis veritatis culpa. Praesentium quia ipsam perferendis. Minima dolores quia quae asperiores praesentium officia inventore praesentium.

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