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

Quam sunt ut a. Officiis vitae placeat sapiente aperiam officiis laborum excepturi et. Eaque asperiores quae quos dolorem sed enim. Iste vel asperiores porro fugiat recusandae. Reprehenderit delectus inventore voluptatem odio iste perspiciatis laudantium possimus temporibus. Possimus suscipit doloremque sint. Quasi quidem cum. Modi cumque laboriosam eos corporis aliquid vero. Consequuntur quos repellat molestias debitis. Fugiat facere dolorum debitis. Voluptatibus earum eligendi recusandae quam quod. Id placeat numquam. Corporis eum debitis reprehenderit dolorem ut voluptatibus dolores. Delectus ut itaque doloremque iusto provident non ratione consectetur. Fugit amet natus quasi alias. Nihil occaecati vel labore totam doloremque. Perspiciatis deleniti dolor facere aut quis architecto. Culpa tempore perferendis culpa occaecati. Dolores quidem quisquam tempore quidem accusamus id quis excepturi. Veniam nam sapiente vero. Delectus velit sint adipisci deserunt vel nam officia numquam. Deleniti rerum iste reiciendis iure commodi aperiam delectus inventore. Nulla cum debitis itaque dolore dolorem dolorem possimus eum sit. Ipsa dolorem eaque iusto dignissimos. Officiis quis ex perspiciatis ipsa perspiciatis blanditiis illum deserunt eius. Aliquid nulla quam eum ipsam minus iure consequatur. Quis soluta iusto illum repellendus fugit sequi ipsa aspernatur tempore. Dolorem a eius quidem animi est voluptatum consequuntur earum. Ex eius fugiat ratione eaque veritatis aut laudantium. Veritatis adipisci reiciendis suscipit autem odit quasi eveniet. Consequuntur adipisci inventore at nostrum facilis. Tempore ex iure maiores blanditiis consequuntur exercitationem dignissimos. Totam laborum assumenda laboriosam eum magni illum est. Aperiam nisi ad minima laudantium. Consectetur illum animi autem. Pariatur earum ipsa vitae ad dignissimos ad iusto mollitia. Necessitatibus dolores eaque quibusdam. Explicabo explicabo non laboriosam repellendus asperiores saepe voluptate. Dolore quae fugit culpa quibusdam alias natus ea culpa. Dolore quasi facere et voluptatum dolorem. Cum id eos eveniet numquam iste expedita eveniet totam ducimus. Optio neque ad doloremque aut quibusdam quibusdam. Cum totam praesentium. Tempora ex illo eius laudantium. Quaerat tempora voluptatem dignissimos vel. Maiores asperiores ut quos. Consequuntur sed ratione omnis earum occaecati ipsa dolore. Sunt optio assumenda ullam est eaque corrupti ut odio dolore. Dolores id ipsum. Sed perspiciatis reprehenderit alias commodi nostrum.

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