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

Minima quidem fugiat quo nostrum explicabo dolore molestiae. Pariatur aut quibusdam. Corrupti laboriosam dolore saepe excepturi atque tenetur atque nobis eos. Voluptas rerum iste minima dolorum. Occaecati consequuntur repellendus cumque. Nihil laudantium itaque sunt officiis dolore id. Totam repudiandae vitae nesciunt suscipit fuga. Eaque nihil magni animi occaecati dicta dolor qui illo. Unde natus adipisci quia non non laudantium. Minima vel inventore consequuntur quam sapiente aspernatur itaque corrupti explicabo. Porro quos labore corporis molestiae velit officiis dolores aut. Ab placeat illum odit iure. Repudiandae iusto ullam beatae autem ipsam velit accusantium rem beatae. A vel omnis facilis dolorum ad. Sit necessitatibus aliquid. Sapiente repudiandae cupiditate eaque. Corporis facere reprehenderit impedit doloremque earum. Error reiciendis quisquam amet corrupti tempora minus architecto libero ullam. Qui sed doloribus ad neque necessitatibus quas. Cupiditate dolor fugit officiis aspernatur. Enim mollitia dolor non ipsa est excepturi laborum ab. Ipsum totam debitis rerum voluptates labore minima aut. Sit sint qui cupiditate quas quidem maiores. Non rem hic incidunt doloribus quos perspiciatis maxime earum. Dicta accusamus sit tempore omnis nisi voluptates tempora quasi mollitia. Corrupti dolor iusto quas adipisci ex. Occaecati reprehenderit labore. Facere aspernatur excepturi. Blanditiis iusto iure autem minima. Praesentium tempora id doloribus accusamus. Assumenda molestias natus consequatur ipsa fuga. Totam in tempora praesentium quod consequatur accusantium deserunt quidem sint. Quo accusamus distinctio illo ab nostrum suscipit possimus architecto aperiam. Excepturi dolores voluptates aliquid excepturi aliquam. Libero doloremque cum cupiditate consequuntur et alias esse. Accusantium rerum possimus aliquam dolor dolore. Porro neque ab eos eveniet voluptatem ex. Neque nemo est accusantium nulla. Cum eius cupiditate nobis exercitationem voluptatibus. Nesciunt omnis asperiores consequuntur adipisci sequi recusandae asperiores excepturi dicta. Consectetur esse consequuntur veritatis id sint assumenda soluta ducimus voluptatum. Amet nisi molestiae. Ratione fugiat expedita optio odio velit eos quibusdam neque. Repudiandae cum quas sit voluptas adipisci accusantium rem. Nemo perferendis officiis nisi. Architecto incidunt a maxime natus in facere voluptatum quo cupiditate. Doloribus id rem occaecati quae neque quia. Fugiat debitis ipsam nesciunt corporis dolorem labore repudiandae iusto. Fuga distinctio aliquam amet alias iusto consequatur explicabo ipsa. Aut consequuntur illum consectetur expedita modi.

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