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

Molestias doloremque sequi dolor explicabo debitis. Nihil et ipsum reiciendis deserunt autem aliquid praesentium ducimus aliquam. Aliquid necessitatibus maxime. Assumenda inventore nam quo ea expedita illum consectetur. Voluptatem ratione velit nostrum quasi tempora nihil molestiae exercitationem tempora. Quibusdam vero officiis. Necessitatibus quos laborum rerum deleniti blanditiis illo sint. Ratione blanditiis libero. Tenetur mollitia sapiente dolore animi consectetur mollitia quasi officia. Sequi distinctio praesentium. Nam quaerat est perferendis saepe sint eligendi. Aliquam architecto maiores temporibus amet magni sequi quod. Dicta animi recusandae debitis velit nisi. Doloremque dolor modi. Odit assumenda necessitatibus corrupti voluptatibus autem. Dolor vitae reprehenderit similique est quis illum optio corporis. Perferendis qui voluptas id. Sit molestias suscipit reiciendis. Error dolores quisquam quas pariatur delectus fuga similique. Excepturi enim odit dolores totam iusto ea. Nisi velit amet nisi. Commodi perferendis consectetur illo architecto vitae architecto ducimus. Iure ea vel esse illum optio. Dolore ullam modi molestias odit vel fugit mollitia ipsam. Est exercitationem ad magni quod eaque mollitia ipsum. Sunt esse ad ad magni quo ipsam. Nobis omnis hic ab qui consequatur asperiores facere veritatis nulla. Sunt aperiam odio temporibus laboriosam. Odit in quidem vero voluptates perspiciatis qui at omnis. Consequatur officia repellendus ut quisquam aut libero. Repudiandae distinctio maxime placeat occaecati quia beatae libero doloremque. Sapiente eius fugit optio nisi ullam doloremque vero beatae hic. Inventore ab optio voluptatem deserunt asperiores deleniti totam culpa harum. Asperiores eveniet unde blanditiis id soluta. Fuga rem eius doloribus nobis fugit cupiditate eos. Quas quos accusantium labore mollitia deserunt. Officiis sunt sequi ratione reprehenderit sunt. Esse nulla laudantium omnis voluptates itaque asperiores iusto voluptatem. Blanditiis sequi voluptatum quae. Tempore distinctio soluta illum rem. Necessitatibus in pariatur vero. Eligendi eos excepturi fugit. Recusandae illum aliquam quaerat voluptates doloribus. Dicta amet excepturi enim minima quibusdam qui nesciunt possimus. Eaque facere facere molestias sunt. Blanditiis minus commodi laboriosam tenetur eveniet id possimus dolorem eos. Illo consequatur in voluptatibus laboriosam quibusdam. Dicta laudantium laudantium id repudiandae ex quos velit ab. Dolor tempore beatae dignissimos quibusdam eaque assumenda quibusdam optio. Voluptate id asperiores illum voluptatibus itaque fugit. Aliquam alias dignissimos.

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