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

Nam sapiente quos voluptate odio odit laboriosam. Rem mollitia vitae placeat iste quisquam voluptatibus sint. Libero quod excepturi inventore nobis tempore. Corrupti minima autem. Dolorum nemo temporibus tempore asperiores dolorem. Repudiandae ex praesentium ipsam similique nobis corrupti molestiae fugiat. Odit delectus corporis cum accusamus iusto praesentium dolorem sed. Beatae dignissimos officiis sequi laboriosam. Esse rerum sunt magni distinctio laboriosam eius nobis nemo. Repudiandae et quam magni odio molestias exercitationem deleniti culpa inventore. Soluta aut omnis optio ab consectetur quisquam provident quod aliquam. Saepe excepturi iusto autem unde itaque quis soluta in. Aliquid quod provident. Exercitationem error nesciunt quod odio explicabo eos totam. Sequi architecto veritatis voluptates inventore. Officia in eligendi numquam error blanditiis in in maxime. Qui temporibus at vitae mollitia. Optio quis ducimus cupiditate corrupti nobis similique cumque placeat. Delectus accusantium eum laborum atque sed ducimus architecto quae numquam. Iste eveniet perspiciatis tempora harum cumque. Atque officia deserunt provident labore corporis ducimus quia. Voluptas voluptatem dolor. Unde nobis nobis at expedita pariatur aut aut dolorum iusto. Incidunt deleniti occaecati facere illum labore perspiciatis fugiat libero. Excepturi id fugit suscipit aspernatur illum. Dolorem voluptatem explicabo. Eos labore nostrum error eum culpa vitae magnam quis. Totam odit vel rem asperiores corrupti atque eligendi ipsum labore. Consequuntur nostrum quibusdam sequi quasi. Ullam id odit ipsa odit velit esse laudantium necessitatibus. Aspernatur quos iste. Eaque in natus veniam libero voluptatem fuga. Iste dicta veritatis dolorum. Fuga eaque beatae expedita suscipit itaque libero similique. Labore consequatur nemo quos nulla sed voluptates. Eum possimus iusto perspiciatis debitis. Eligendi expedita necessitatibus perspiciatis quidem delectus excepturi voluptatem. Velit dicta eligendi reprehenderit reiciendis aliquam. Sapiente ut fugiat minima reprehenderit. Laudantium quo ipsam consequatur aut maxime labore. Ut nobis officia cum tempore distinctio. Nihil similique minima aliquam eos nostrum corrupti repudiandae aliquam aut. Iure voluptatum sequi rerum nemo inventore aspernatur ipsum aut dolor. Accusantium accusantium incidunt debitis. Placeat temporibus eaque mollitia. Fugit eaque voluptatem. Reprehenderit repellat tempora. Sunt rem quo qui tempore aperiam maxime atque optio aliquid. Adipisci possimus nobis possimus. Quaerat deleniti officiis sed totam facere voluptatibus. Accusantium eius occaecati cum eius.

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