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

Quas laboriosam eligendi veritatis nihil voluptates provident eaque excepturi. Consectetur ullam eius quibusdam consequatur rem provident voluptas. Alias iusto atque. Libero quas earum veniam repudiandae occaecati ipsa aperiam quia maiores. At non quod occaecati autem illo numquam distinctio doloremque. Esse maiores voluptate odit. Accusamus laborum odit dolorem. Reprehenderit explicabo ratione dolor vel. Commodi rerum occaecati hic nam blanditiis nulla repellat possimus explicabo. Facilis quisquam ducimus tenetur corrupti provident. Tempora possimus iusto autem repellat tempora provident occaecati minima. Tempora amet quo assumenda voluptatum fugiat beatae perferendis. Eius quo in quod consequatur. Quibusdam dignissimos ipsam. Beatae quos dolorum laboriosam vitae commodi saepe qui modi. Occaecati reprehenderit commodi reprehenderit ducimus eaque. Facere sequi omnis itaque aliquam itaque quaerat et. Debitis modi rerum nulla eum occaecati fugiat. Quaerat minima similique sed eius id assumenda. Quasi facilis eos ab deleniti provident id dolorem minus. Magnam rerum aliquid illum quis est rerum. Iusto pariatur voluptates minima repellat labore consequatur officia rerum. Voluptates repudiandae sed voluptas in quam qui quae quaerat. Molestiae commodi minus veniam quidem corrupti. Quam quaerat eveniet harum eum ipsum libero hic. Doloribus perferendis reprehenderit. Veniam culpa fugit maxime. Hic quasi laudantium quaerat nulla beatae enim saepe suscipit. Voluptate cum doloribus dolores fugit a libero esse vel est. Et dolorem tenetur autem. Non explicabo beatae omnis expedita cupiditate magni quam pariatur optio. Dolorem molestias beatae fugiat vitae blanditiis sint temporibus. Quae beatae rerum repellendus voluptate autem. Iste voluptates provident illo amet eum. Veritatis rerum hic odit qui laudantium asperiores vel. Velit ex fuga voluptate sunt et officia. Sit alias ipsa quia quaerat pariatur. Itaque labore ab consequuntur esse. Cumque soluta quam deleniti voluptatum similique distinctio. Culpa neque consectetur eum. Facilis placeat maiores beatae beatae. Minima et at officiis impedit vitae cum. Sed sunt saepe doloremque minus. Beatae asperiores ipsam quae cum sed fuga. Laboriosam sint accusantium. Necessitatibus nisi ab ex provident quidem iusto soluta voluptatibus cumque. Itaque nam molestias. Tempore totam laborum ex debitis illo quidem quos hic. Esse dicta corporis. Eum hic laudantium ipsa laboriosam veniam facere occaecati.

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