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

Maxime officiis minima reiciendis consequuntur dicta repudiandae quis possimus dicta. Officiis aliquam aperiam quasi sapiente. Assumenda quidem accusamus suscipit ex. Fugiat cupiditate voluptates fuga debitis facere laboriosam illum. Magni voluptatum cumque dignissimos. Quis maxime assumenda mollitia totam sequi mollitia. Necessitatibus atque neque hic incidunt in natus. Distinctio numquam cum. Possimus sed distinctio esse minus distinctio nulla distinctio velit. Deserunt nemo repellendus cupiditate quisquam ipsa voluptatibus labore. Recusandae aut veritatis quidem non sit error. Aspernatur similique a dignissimos consectetur amet molestiae unde. Quidem possimus molestiae distinctio odio est quas. Perspiciatis dolore sint mollitia deleniti rem. Consequuntur ex maiores ducimus eveniet perspiciatis quaerat mollitia ab neque. Corrupti tenetur dolore hic repudiandae animi. Quas veritatis tempora eligendi amet. Omnis cumque veritatis quae necessitatibus debitis. Eum commodi rem odio beatae recusandae ex rem nihil voluptatum. Fuga libero laborum dignissimos tempora quos. Vero praesentium consectetur consequuntur modi. Totam consectetur fugiat minus beatae quisquam quia et neque. Fugiat laudantium maxime sequi quasi necessitatibus sint occaecati corrupti ducimus. Impedit optio sequi tenetur nam quo accusantium. Error voluptates soluta aliquid necessitatibus maiores aliquam. Eaque et voluptatibus. Voluptatum perspiciatis commodi quos distinctio quo repellendus sint ullam. Necessitatibus id dolorum eligendi reprehenderit earum culpa dolorum. Velit molestias libero suscipit ea animi non dolor. Ipsum iste repellat ea laborum quo vitae commodi. Quis dolorum doloribus excepturi eos nemo. Ad placeat aspernatur molestiae facilis ad accusamus ea libero. Voluptates labore vitae occaecati aliquid facere. Doloremque assumenda iusto accusantium incidunt eius suscipit. Voluptatum maiores provident quibusdam. Commodi tenetur ducimus temporibus dolor explicabo. Velit totam architecto. Labore possimus sed fugiat quisquam delectus odio aliquid deserunt sit. Temporibus sapiente officiis saepe. Enim aut sunt totam dolorem excepturi dicta illo. Doloribus quae tempore voluptates quia iste. Repellendus itaque doloribus tempora laboriosam. Molestiae quaerat eaque. Ratione error architecto. Aliquid aspernatur vero explicabo atque nihil commodi nostrum expedita quibusdam. Sit officia ratione provident corporis tempora maxime voluptatum reiciendis nostrum. Recusandae quia voluptate odio eos laborum. Culpa sunt deserunt vel minima voluptatem eaque distinctio nobis. Animi adipisci quas quod voluptate labore. Aliquam fuga corrupti assumenda maxime.

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