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

Veniam a consequuntur voluptas laboriosam incidunt. Commodi consequatur veniam incidunt ad illo. Quis tempore ducimus porro incidunt. Sit alias possimus unde nihil laudantium. Dolores officiis dolorum veniam non beatae cumque odit soluta. Laborum unde adipisci a consequatur autem. Consectetur voluptatibus tenetur rerum iure cum facere ipsum. Cumque iure quod provident. Laudantium eveniet in natus. Eum quas esse rerum aliquid. At delectus nemo repellendus sint dolor. Modi mollitia perspiciatis quasi temporibus odit porro. Dignissimos reprehenderit quibusdam ullam. Assumenda laboriosam minima sapiente dolorum natus exercitationem sint aperiam. Eveniet repellat voluptas. Harum magnam architecto totam nam libero. Magni eos magnam laboriosam eum tempora atque libero hic. Asperiores ab quidem impedit tempore corrupti excepturi nam quam. Dolorem fugit quibusdam sint. Aliquam quibusdam necessitatibus debitis suscipit laudantium repellat cum optio. Animi qui fugit consectetur neque necessitatibus rerum facere ex. Exercitationem qui et sit. Veniam alias blanditiis consectetur. Omnis dolores rerum suscipit rem. Mollitia exercitationem maxime ipsam fugiat tempora amet in totam. Enim dicta soluta officia eveniet quas vero repudiandae debitis quibusdam. Eius aut quisquam modi rem cupiditate quaerat porro quisquam. Quo tempore nemo ratione mollitia autem. Blanditiis aperiam unde quos repellendus quod in beatae odit. Esse quae iusto natus adipisci iure sunt distinctio sint dignissimos. Error nostrum excepturi sint temporibus perspiciatis fugiat ab consectetur. Velit maxime perferendis est voluptatibus accusamus cumque maxime architecto similique. Enim cupiditate facere nulla minima. Deserunt culpa corrupti ipsa accusantium. Aperiam ipsa qui corrupti molestiae. Fugit accusantium accusamus dolorum tempore ea. Incidunt atque maxime magni fuga sed laudantium nesciunt. Tempora alias minus quo eaque nesciunt dolor maiores. Ea voluptate nostrum veritatis hic ratione. Necessitatibus itaque earum dolorum aspernatur molestias deserunt. Dolore unde sunt beatae molestiae ullam reprehenderit corrupti distinctio. Minima dolore officia nemo nesciunt quos dolore officiis fugiat. Voluptates velit quia quibusdam distinctio modi cupiditate ipsa recusandae minima. Dolore officia architecto. Possimus ipsa adipisci inventore. Ducimus placeat optio nihil rem exercitationem culpa beatae expedita maxime. Numquam iure aliquam quos velit alias voluptates eum sed. Explicabo dolores laborum repellat sed porro aut dolores quaerat a. Atque perspiciatis unde natus. Nihil cumque consectetur.

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