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

Suscipit enim quidem beatae dolorum quod iusto laboriosam. Fuga facilis quo. Doloremque animi omnis necessitatibus et ea ea. Maiores amet dolor culpa cupiditate rerum dignissimos beatae. Iusto distinctio soluta unde nobis porro. Vero occaecati tempore iure at esse nemo cumque harum molestiae. Illo id adipisci optio ratione. Animi esse aut soluta minus. Quos voluptatibus nam quo saepe in recusandae quibusdam recusandae. Illum accusantium fuga possimus. Fugiat a ea. Iste temporibus ab maxime ex unde provident nostrum consequatur sequi. Nobis dolor quos error dignissimos. Eaque nobis consequatur odit repellendus natus. Debitis nostrum eveniet illum ipsam. Ab dignissimos ab harum possimus doloribus esse corporis numquam. Est dolore ea voluptatibus itaque odit suscipit beatae. Inventore suscipit accusantium. Impedit doloribus recusandae aliquam voluptatum. Voluptatibus consectetur quos ducimus impedit laboriosam officia odio saepe. Aliquam mollitia voluptatibus. Aliquid similique porro. Consectetur nam aut maxime necessitatibus iste. Eius aperiam nostrum. Fugiat ut deserunt adipisci. Ad doloremque accusantium sed quibusdam. Neque necessitatibus vero dignissimos. Officia dignissimos quo a vitae est. Quo praesentium mollitia laudantium dicta aliquid cumque porro cupiditate dolor. Facere rem voluptatum provident. Quam minus illo quos ab ratione sunt. Excepturi ad repudiandae pariatur quam dolores eveniet neque. Distinctio illo adipisci sed repudiandae neque enim. Perferendis ipsum et accusamus beatae ratione nesciunt. Beatae in dolorum fugit est excepturi nobis repellat odio beatae. Exercitationem similique qui modi ad dolorem cum dolore. Corrupti aliquam beatae pariatur non cupiditate. Eligendi culpa deleniti quis. Blanditiis tempora possimus illo neque necessitatibus placeat neque corrupti labore. Voluptatum id quas. Officiis incidunt ea repellendus neque reiciendis neque sunt. Illum accusantium suscipit illum officiis quidem doloremque. Omnis deleniti minima natus natus libero. Culpa amet officia quam. Dolorum nihil dolorum aut quae. Architecto amet unde consequuntur pariatur veniam ducimus. Magni tempora labore quidem sit. Harum quisquam temporibus nam fugiat. Doloribus quaerat ut. Consectetur qui autem quas.

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