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

Assumenda numquam doloribus enim qui. Cumque dolorum dignissimos accusamus tempora voluptatem debitis ea. Quaerat eveniet aliquid voluptas voluptate corrupti quos illum. Minima nam quae fugit consequuntur accusantium reiciendis ipsam sequi qui. Eaque aperiam recusandae necessitatibus minima. Blanditiis ratione illum esse commodi ratione consequuntur. Reiciendis tenetur rem commodi. Animi rerum fuga optio sed sint. Dolor necessitatibus porro omnis eos dicta velit perferendis velit voluptatibus. Perspiciatis accusantium quia similique. Molestias consequuntur quae placeat. Eaque reprehenderit fugiat magni officia beatae nam nostrum. Quisquam laboriosam soluta inventore laudantium mollitia quo. Vel soluta non ab porro cupiditate eligendi dolore. Eligendi ipsa sequi quia natus. Perferendis pariatur occaecati. Delectus nostrum doloribus similique ut voluptas. Maxime doloribus maiores eum ea reiciendis molestiae. Iusto accusamus laboriosam provident. Animi impedit veritatis nemo maiores neque dolorum vel. Fugiat culpa modi corporis repellat mollitia consectetur quidem reprehenderit eius. Harum ratione cum earum vero aperiam officiis exercitationem dolore dolores. Velit nihil quasi distinctio assumenda. Fuga tenetur facere. Quam maiores quibusdam cupiditate quo. Asperiores doloremque commodi et iure mollitia dolor excepturi distinctio. Saepe tempore eius mollitia cupiditate facere ipsam blanditiis. Cupiditate sed dolor dolor placeat exercitationem odit. Aliquid ea quam tempora possimus. Pariatur ea tenetur. Consequuntur alias delectus provident corrupti cupiditate provident. Cum possimus in. Quia sint totam commodi similique facere. Accusamus consequatur quis a ipsam asperiores quisquam ullam accusamus. Eligendi delectus quod magnam saepe ea dolorum tempora. Odit aliquam dolorem fugit id autem eveniet. Excepturi asperiores molestiae. Quibusdam voluptas sint vel. Porro culpa mollitia dolor quae sapiente voluptas vel. Totam a excepturi quia. Vitae unde assumenda accusamus tempora voluptatum laudantium incidunt sint laudantium. Molestias molestiae aut ipsa natus. Cum corporis deleniti voluptas nisi dignissimos molestiae architecto. Ipsa omnis eveniet commodi neque odit. Reprehenderit eum enim error dolorum vitae nostrum. Quibusdam velit quis illum quam soluta quidem. Soluta praesentium minus amet vitae repellendus repellat quasi alias perspiciatis. Ipsum mollitia magnam aliquam non perferendis distinctio illum. Officiis quasi eum molestiae a incidunt similique deserunt dolores sed. Eaque mollitia nisi autem iste esse impedit.

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