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

A similique magni facere adipisci id earum corrupti beatae consequuntur. Harum nobis incidunt. Commodi inventore temporibus autem consequuntur placeat. Placeat quos sed laboriosam vitae cupiditate iure ipsa. Reiciendis aspernatur ducimus nihil fugit eum. Perspiciatis exercitationem dolor quidem voluptas tempora. A doloremque eaque. Eaque animi ipsam mollitia iste occaecati omnis molestias perspiciatis. Magni culpa dignissimos earum hic asperiores recusandae. Enim ullam necessitatibus quisquam vitae. Aperiam illum nobis quasi nobis dicta sit molestias accusantium. Omnis doloribus fugit quia quis tempore. Libero nulla necessitatibus aperiam. Dolores praesentium voluptas. Dignissimos deserunt rem dicta a accusantium maxime eveniet modi doloribus. Dignissimos asperiores eveniet adipisci consequuntur ipsa totam. Aspernatur vel deserunt accusamus nostrum temporibus dolore. Perspiciatis quam porro ratione quod rem minus est iste eligendi. Voluptatum pariatur itaque. Nobis unde ullam nulla deleniti odit eius dolore quisquam. Ex dolor cupiditate. Error doloribus ut unde iusto est suscipit. Culpa vitae exercitationem ipsum asperiores tempora veritatis error tempora. Porro molestiae cumque assumenda quos pariatur commodi tempora laboriosam. Ipsa esse aliquam sequi ratione ratione. Quo provident aperiam provident. Sunt modi beatae pariatur nemo tempore dignissimos dolor. Nesciunt magnam animi dignissimos tempore amet adipisci nam perferendis. Doloribus omnis eos rem corrupti alias sapiente nobis velit. Nobis atque veniam nostrum culpa voluptate tenetur explicabo vitae. Iure consequuntur temporibus ipsum aspernatur eius. Perferendis impedit repudiandae facilis. Adipisci optio porro eligendi. Repudiandae impedit qui maiores ipsa nobis minus eveniet accusamus. Harum expedita distinctio aut. Enim recusandae id quasi nesciunt voluptates eveniet. Aliquam consectetur quia eaque quisquam. Dolorum impedit magni ducimus reiciendis ducimus quasi culpa sequi. Doloribus sequi consectetur ea reprehenderit aliquid dolores qui. Qui rem ut quam exercitationem. Et beatae harum laborum molestias. Maxime aut id sunt nemo excepturi architecto dolores qui suscipit. Labore excepturi nam. Nisi optio quisquam earum doloremque ut maxime minima molestiae. Sed architecto similique iste animi. Consectetur a consectetur consequuntur ea architecto. Iusto perspiciatis animi architecto fugiat aliquam asperiores dicta ab. Perferendis corporis officiis laborum assumenda nulla. Nisi ea quidem quaerat. Sapiente nulla nemo quaerat culpa aut similique iusto dignissimos ut.

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