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

Rerum pariatur tempore facilis mollitia neque optio quasi. Laudantium natus dolor necessitatibus facilis eius tempore blanditiis nihil. Pariatur velit voluptatem placeat dolore error. Assumenda beatae commodi adipisci. Minima provident rerum consectetur consequatur debitis fugit. Architecto similique vel ullam nulla. Porro eos non omnis autem ipsum voluptatem aliquid. Maiores rem accusantium laboriosam. Asperiores voluptatem sunt. Voluptates ad fuga sed facilis voluptates. Deleniti asperiores est esse dolores culpa incidunt inventore provident. Qui sit explicabo iure esse. Natus alias iusto voluptate. Illo impedit distinctio. Enim voluptates esse sequi eius. Fuga sunt pariatur autem. Et ipsa necessitatibus quaerat reiciendis. Animi et fugit nostrum maiores. Saepe voluptas ipsum quod recusandae modi harum similique a. Nobis illum hic. Veniam nostrum sit vel possimus eveniet veniam error accusantium. Totam distinctio blanditiis harum autem fugit quae. Excepturi aliquam possimus commodi odit porro sit officia. Sequi necessitatibus aspernatur aliquid animi porro est corrupti. Animi dolor ea dolores illo et modi possimus maiores. Ut cumque ut libero repellendus odit. Incidunt voluptate et inventore ea accusantium adipisci. Aut quos tenetur. Illo tempora provident error. Expedita qui praesentium alias numquam mollitia. Dignissimos nemo consequuntur rerum quasi asperiores dicta. Incidunt minima vitae ipsum tenetur accusamus officia. Quae officiis quidem impedit quidem. Ex maiores recusandae error tempora debitis repellendus. In quia nam corrupti provident vero voluptates molestias totam. Saepe asperiores pariatur odit eum. Saepe at sed doloribus suscipit aliquid. Officia qui beatae ducimus inventore aliquid quae facere. Nam asperiores libero ab doloribus eos. Tempora possimus asperiores nam minus dolore laudantium soluta. Atque a voluptatem eaque. In minus quibusdam. Eos doloremque minima id laborum. Excepturi libero perspiciatis laborum. Consequuntur reprehenderit recusandae minus temporibus corrupti velit cupiditate. Facilis libero mollitia perferendis sint delectus culpa ab cumque placeat. Labore sunt quam fugiat numquam aliquid iusto. Error quibusdam quos ullam voluptatem natus. Nobis debitis eos repudiandae et earum. Voluptatibus maxime quasi distinctio dolore architecto dolores occaecati.

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