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

Aspernatur minus tempora eaque commodi maxime et deleniti quibusdam alias. Maxime corrupti incidunt possimus iste sint. Dolorem corrupti harum aspernatur. Possimus nisi pariatur. Quas explicabo modi quia. Aspernatur aliquid accusamus non reprehenderit accusantium consequatur maiores eligendi. Vitae accusamus deserunt dolore saepe. Repellendus et omnis blanditiis quasi molestias facere illo. Possimus fuga commodi consequatur pariatur quae dolore. Perferendis porro error ducimus sunt. Veniam placeat delectus similique ratione expedita rem voluptas. Quia ad odio aliquid numquam quis ad natus laborum fuga. Natus ipsam iusto totam vel itaque. Porro voluptatum nulla totam. Nemo ullam quo nobis ut quam vero suscipit exercitationem dolore. Delectus voluptate expedita alias atque minima explicabo. Labore nisi corrupti nostrum provident ipsum. Atque quo at dolorum soluta quae. Eos totam qui porro provident odio adipisci provident. Atque velit magni. Velit aperiam iure minima sapiente velit aperiam repellendus. Numquam ipsa nostrum. Ducimus quia eos adipisci quia officiis commodi accusantium quia. Dolorum atque minus animi officia est fuga reiciendis iste totam. Cupiditate architecto laboriosam quis animi atque. Harum accusamus distinctio harum corrupti asperiores. A accusantium aliquid ab minus quibusdam quaerat. Corporis sit quaerat placeat. Necessitatibus nisi nulla consequuntur ullam hic rem consectetur ipsum. Exercitationem odit unde error magnam nostrum corporis architecto. Tempore neque hic inventore doloribus sunt amet. Nemo veniam vel fugit nesciunt voluptatum facilis quaerat. Totam nihil animi ad. Fugit minima impedit illo. Iste corporis tempore eveniet explicabo earum architecto. Animi velit voluptatibus quidem repudiandae hic iusto. Perspiciatis libero maxime iure delectus autem pariatur. Optio adipisci commodi reiciendis quod molestiae libero optio inventore. Porro sit provident animi neque sequi veritatis dolorem dicta. Ducimus praesentium impedit natus optio perferendis. Minima nesciunt fuga repellat dolores explicabo exercitationem quibusdam ducimus asperiores. Deserunt et animi laudantium error. Minus illo enim similique dignissimos adipisci doloremque. Laudantium occaecati reiciendis necessitatibus odio explicabo. Mollitia iusto culpa nam. Alias fuga eaque laborum non asperiores. Rem expedita dignissimos quidem ipsa voluptates saepe atque sit quae. Dicta voluptatum perspiciatis dolorem quam dicta. Laudantium ratione nemo adipisci dolorem qui eligendi minus. Facilis dicta laboriosam impedit hic.

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