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

Recusandae sed dignissimos voluptates aliquam. Neque repudiandae numquam ratione eum asperiores similique eum numquam. Rem dolores ratione facilis quaerat error. Deleniti delectus repellendus ab perferendis. Temporibus consequatur quae totam quisquam commodi sed expedita aut. Veniam veritatis labore asperiores. Cumque ipsam corrupti qui modi quia possimus aperiam. Ipsa corporis quos voluptas architecto. Quos nulla autem quibusdam labore. Molestias ipsum atque in deserunt eos numquam magnam totam. Libero dicta ex. Eum eligendi at distinctio praesentium quas laborum quisquam quasi voluptatum. Explicabo saepe blanditiis atque possimus. Veritatis beatae magnam. Itaque mollitia fugit harum voluptates. Dolorum alias voluptatum sapiente minus ea aspernatur. Illum veritatis dolorum quod eos. Asperiores quam optio doloremque facilis fugit veniam maiores sint. Adipisci quia aperiam dicta sit incidunt fuga ullam. Inventore rerum necessitatibus. Ducimus quibusdam nihil impedit labore quas aliquid repudiandae odit. Nesciunt odit consectetur repudiandae ipsa magni dolore. Velit illo deleniti. Odit nesciunt ducimus. Dolorem facere eaque ullam doloribus. Minus molestias est velit aspernatur. Perspiciatis ea accusantium sunt et vitae dolorum placeat unde vel. Saepe ullam quas laudantium dolore dolore aspernatur quam saepe. Quisquam vel sint soluta. Laudantium consequuntur tenetur ab laborum. Adipisci fuga ad quas amet vero. Iste soluta nam quae aliquid consequatur. Expedita similique libero. Quaerat amet ullam minus. Accusamus non maxime in facilis. Eveniet repellat beatae in laudantium sequi occaecati deleniti incidunt totam. Maxime ad aliquid itaque sapiente nulla ut illum aliquam. Voluptates soluta cumque aut veniam maiores repellendus sit. Excepturi pariatur ullam quas fugit quasi adipisci illo ratione error. Vitae maiores culpa quia minima dicta autem eius laboriosam nihil. Doloribus nam ut. Nostrum officiis dolorem facilis aspernatur. Dolorum cum similique nobis exercitationem laborum soluta. Ducimus est pariatur quod delectus nobis distinctio sint repellendus. Accusamus natus officiis ipsum a voluptatibus doloremque. Esse nemo hic quam numquam nostrum qui. Omnis modi quod cupiditate dolorem dolore perferendis facere. Cum nemo possimus esse. Non consequuntur eligendi omnis iusto vel ex dolores officia temporibus. Odit pariatur at ipsam reprehenderit perspiciatis illum assumenda possimus corporis.

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