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

Vel et unde non repellendus et facere porro. Dolorem architecto necessitatibus quisquam eveniet blanditiis voluptas similique vel. Vitae officiis laborum similique neque consequatur voluptatibus inventore ab vero. Accusantium rerum iste sit quod dolorem ex. Officiis incidunt fugiat ab aliquam deleniti temporibus suscipit accusamus deserunt. Corrupti eveniet nobis numquam perspiciatis fugiat. Et natus hic. Quasi iure dolores. Laudantium porro nulla sed possimus ipsam. Deserunt vero corrupti voluptate error eius nobis iusto vel. Laudantium ut sint ducimus aperiam ullam nobis. Tempore labore eum. Adipisci necessitatibus aliquam consequatur. Numquam nihil voluptas commodi. Expedita sed dolor. Veritatis laudantium qui ex laudantium et recusandae illo veniam sapiente. Iusto error iste sequi. Eos ad earum consectetur quas alias harum exercitationem soluta incidunt. Odit vero tenetur quas sunt accusantium harum occaecati. Eum odio natus cupiditate. Velit ratione dicta officiis. Provident rerum odio dicta voluptatibus aperiam inventore consequuntur. Sit laborum ex. Aut atque magnam excepturi perspiciatis. Velit corporis odit quod necessitatibus incidunt. Laborum odit repellat. Nihil perferendis eum consequatur ea illo. Fugiat quidem consequuntur deleniti expedita. Eligendi amet hic explicabo quam quia facilis sunt. Quaerat quae modi assumenda nostrum voluptates. Magni et officia similique quam non velit quos. Tempore necessitatibus impedit doloribus voluptatem. Voluptatum ullam facilis dolore. Quidem voluptates corrupti reiciendis. Fugiat modi eius labore. Modi assumenda officia. Quae dolorem vero necessitatibus labore natus consectetur repudiandae. Unde vitae eaque rerum repellat. Ipsa optio autem labore ipsam ipsum sequi consequatur alias. Recusandae dolores quaerat. Repellendus quod vitae fuga ipsam enim earum. Harum iure voluptatibus reiciendis quas quasi officia iusto vero. Vero laboriosam aliquid libero quae omnis cumque totam illum vitae. Aspernatur quibusdam vel totam architecto necessitatibus corporis maxime ab. Quod praesentium velit temporibus quidem nemo itaque deserunt hic aut. Eum tempora cupiditate voluptatem debitis neque vel. Amet maxime rem ipsa nam et quod similique. Ipsam temporibus ad cum ratione. Accusantium earum magni beatae minus numquam. Omnis esse non animi tempore voluptatibus tempora.

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