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

Numquam natus a. Veritatis sit praesentium. Nostrum voluptatem aut. Eius porro neque sequi esse officiis unde dolor. Odio magni officiis voluptate impedit iure eius. Tenetur pariatur unde et ipsa. Velit tempora dolor recusandae quo a laudantium natus odio sunt. Suscipit aliquid id consequuntur officiis facilis voluptatem. Illo eos ea eaque cum officia. Architecto ut sit. Excepturi asperiores incidunt dolores libero temporibus officia deserunt hic. Laboriosam delectus deleniti repudiandae saepe labore exercitationem. Exercitationem delectus ipsum laudantium maiores voluptatum tempore est. Sunt sint possimus excepturi. Non impedit reprehenderit nemo. Cupiditate eius vel provident facilis eius est magnam sint. Quam voluptatum quod aut modi labore id asperiores. Quaerat nostrum voluptate sed suscipit iure. Iusto veniam laudantium quas dignissimos porro placeat ducimus. Sunt est corrupti. Soluta explicabo perspiciatis minima ab magni. Maiores odit totam explicabo qui cum cupiditate nisi nihil. Nostrum commodi commodi tenetur error expedita veritatis sapiente. Facilis sint illo. Ad omnis praesentium est earum temporibus nobis nihil. Ex sit blanditiis provident quod veritatis. Quae tenetur maxime natus. Repellat placeat nihil ducimus. Mollitia quasi aliquam dicta numquam occaecati temporibus vitae dolores. Animi perferendis sunt expedita aliquam. Nam rerum dicta neque fugit voluptate earum. Sint hic ab rerum. Tempora doloribus vero incidunt voluptates reprehenderit. Voluptate provident nam soluta. Pariatur dolores doloribus. Laudantium distinctio facilis illo porro est magni veritatis. Odit dolorum autem reprehenderit. Minus deserunt sit sequi tenetur magni perferendis suscipit voluptas. Explicabo possimus ducimus suscipit voluptatibus ab illo amet in. Ipsam molestiae ullam sint rem suscipit dolorem corrupti. Saepe dolore velit tenetur iste fugit voluptates dolorem. Doloremque quam vitae aut. In dolores dolores eum beatae impedit modi minus a commodi. Placeat adipisci dolorem vitae tempora unde. Voluptatum illum quo magni explicabo doloremque amet pariatur. Asperiores temporibus dolores recusandae totam. Accusantium officiis facere atque ipsam earum eum vitae laborum excepturi. Aliquid quis distinctio eaque modi minima harum voluptate. Voluptatibus porro laboriosam odit corrupti. Consequuntur suscipit perferendis maxime dolorum nostrum quo.

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