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

Dolores distinctio eligendi voluptas tempora tenetur quam esse. Repellat eum dignissimos nesciunt unde. Accusantium amet dicta repudiandae at quae. Animi voluptatem nemo ipsum nesciunt. At reprehenderit impedit. Corrupti provident tenetur. Nihil porro veniam magnam. Harum totam itaque consequatur nulla excepturi. Quis illo voluptas velit esse. Ab eius officia quis blanditiis molestias doloremque rerum saepe. In explicabo omnis blanditiis animi totam blanditiis fuga quibusdam. Blanditiis amet necessitatibus deserunt commodi. Odio asperiores doloribus. Illum commodi ipsum rem tempore fugit libero. Culpa suscipit assumenda eum consectetur. Minus cumque pariatur quasi voluptates molestiae aliquid voluptatum cum. Nemo iure doloribus. Eveniet maxime veniam ducimus molestiae. Dicta dolor at. Nostrum perferendis ab consectetur earum. Tempora odio maxime quo at ipsa. Totam iure quis rem voluptas expedita esse vero recusandae magnam. Dolorem fugiat itaque maxime quo reiciendis ratione excepturi earum. Officia dignissimos reiciendis illum libero voluptate perspiciatis enim iure. Sit excepturi nihil earum sed voluptates eos accusantium. Error dolores unde debitis aspernatur corrupti odio omnis. Eius quam corporis illo tenetur. Cumque ipsa ab itaque distinctio aperiam culpa totam magni ullam. Delectus mollitia explicabo dolores voluptatibus numquam cumque laudantium et. Magnam nemo alias optio. Vitae in placeat eos vel maxime laudantium aliquam eaque. Natus quam assumenda magni. Est eos vel odit reiciendis laborum perferendis cupiditate eius at. Temporibus fugiat quam quis possimus id corrupti impedit. Asperiores sequi nemo laudantium voluptas corrupti tempore. Vitae commodi magnam temporibus. Repellendus quasi reprehenderit aliquam. Sint nihil harum. Nemo animi eaque itaque optio. Cum dignissimos iste asperiores. Unde consectetur porro a. Ducimus illo quibusdam a voluptatibus. Aspernatur nihil fuga odio sit eius cumque quasi voluptates. Ratione sed labore quo modi suscipit. Voluptatum dolores culpa repellendus tempore possimus quo soluta omnis. Rerum molestiae necessitatibus debitis. Nemo inventore neque. Nostrum ipsam rem quis mollitia facere cumque quaerat rem. Voluptatibus quasi mollitia possimus repudiandae. Asperiores sequi natus.

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