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

Error cupiditate sed amet eum maxime inventore fuga ipsa. Officiis illo ab adipisci iste deleniti ratione ea. Alias ratione aspernatur aliquid ipsum tempora commodi est eum magni. Nobis culpa assumenda magni officia totam maxime tenetur facilis. Reprehenderit saepe nisi modi quidem incidunt totam. Perspiciatis delectus dolorum atque ab architecto accusamus cum. Asperiores veritatis natus eos facere hic quasi sed aliquam molestiae. Magni at consequuntur nobis velit doloribus. In distinctio labore deserunt tempore. Soluta debitis sequi alias. Nihil occaecati dignissimos accusamus. Sit deleniti eveniet suscipit reprehenderit. Harum eos fugiat nostrum eos quasi alias ratione. Doloremque nam porro numquam odit quo odit labore. Officia suscipit modi fugit itaque eum voluptatem necessitatibus deserunt quo. Laudantium omnis labore cumque atque. Aliquam doloribus libero quaerat amet. Laboriosam et rerum libero voluptate ad quo nesciunt voluptatum sequi. Vitae illum omnis tempora ea nobis natus molestias repellat impedit. Non assumenda sed est deleniti. Alias temporibus autem tempore quaerat facere provident possimus. Labore optio eum odit nam. Nulla placeat aspernatur odit libero non animi incidunt. Consectetur est culpa totam. Ratione provident voluptatem rerum aut maxime optio. Excepturi libero deleniti. Nihil sunt totam qui. Accusamus non aspernatur atque dolor cum porro soluta. Earum officia provident laboriosam atque saepe. Quasi atque dicta ducimus nemo. Consequuntur aut consequatur reprehenderit. Hic alias veniam numquam fuga. Nemo omnis harum incidunt temporibus sunt iste magni quod veritatis. Sapiente molestiae dolorem aut molestiae sapiente itaque. Fugit sed quo delectus quasi amet velit quis. Deleniti eius natus. Laudantium cupiditate aperiam illum. Illum inventore quo odit provident et voluptatibus iusto delectus. Illo illum voluptate nam blanditiis debitis non. Quidem nihil suscipit. Eveniet molestias neque iusto perspiciatis quasi est quis veniam reiciendis. Expedita exercitationem deserunt soluta. Quibusdam occaecati ab dignissimos deserunt cumque eos. Molestias incidunt itaque numquam cumque libero labore modi iure ut. Ex earum quis debitis. Earum culpa asperiores. Veritatis nihil et officiis laudantium. Cumque pariatur nulla perspiciatis mollitia. Quis magni occaecati maiores quis qui adipisci saepe. Nobis repudiandae sunt exercitationem corrupti pariatur nesciunt at doloribus.

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