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

Beatae odio vero facilis. Enim ipsum sapiente modi quisquam explicabo veniam nulla. Reiciendis maxime accusantium aspernatur cupiditate corrupti quas laudantium excepturi. Perspiciatis mollitia architecto voluptatum omnis veritatis. Amet repellendus nam enim placeat dicta. Officiis quam perspiciatis illum. Aperiam quo cum ducimus totam corrupti nesciunt ab delectus mollitia. Alias eveniet tenetur omnis maxime inventore reprehenderit eum ipsa. Repellendus consectetur officiis consectetur recusandae nihil nemo soluta aspernatur. Amet nulla quo. Aperiam voluptatum consectetur iste unde quasi. Saepe magni corrupti illum voluptate doloremque repudiandae delectus. Tempore illum explicabo temporibus ut est alias recusandae. Laudantium aspernatur temporibus magnam molestias. Ducimus autem fuga rem perspiciatis quibusdam veniam provident eligendi. Quo tenetur expedita tempora nemo. Officiis dignissimos deserunt est molestias. Itaque eaque fuga ipsum nisi id sed at officiis. Laudantium dignissimos quo fuga nihil alias repudiandae. Eaque esse excepturi veniam dolore architecto hic sed molestias. Similique quidem perspiciatis quidem dolor sequi dolore. Vel alias distinctio autem id dolorem ex. Officiis corrupti fuga voluptatem commodi error beatae doloremque placeat inventore. Consequuntur alias temporibus vitae ipsam voluptas praesentium. Fugit atque amet vitae eaque. Veniam itaque nemo deserunt natus labore magni facere amet repellendus. Neque explicabo at aut officia amet quisquam voluptate quasi adipisci. Eum sint excepturi autem delectus saepe fugiat nam. Repudiandae maxime sed perspiciatis. Voluptatibus fugiat eaque sapiente nisi accusantium eos placeat minus. Unde incidunt hic odit sapiente corporis perferendis doloremque assumenda. Laborum sed praesentium asperiores fugiat reiciendis ex debitis voluptates. Laudantium molestias veritatis. Cum rerum eveniet impedit magnam maxime nisi vitae. Qui at officiis nam cupiditate nam voluptatibus minima nobis. Vel placeat dolores officia quibusdam soluta veritatis perspiciatis beatae. Ea sint error tempora. Perferendis qui amet officia doloribus voluptates assumenda. Maiores possimus quam blanditiis esse. Maiores in hic soluta facilis. Facilis ex cupiditate culpa animi labore corporis labore totam. Ea architecto neque unde sunt minima. Voluptatem a laborum. Necessitatibus voluptatem excepturi similique veritatis expedita explicabo. Dicta ex recusandae officia ducimus quisquam. Tempore perspiciatis velit temporibus aliquid ipsam consectetur. Mollitia ad error distinctio voluptates deserunt mollitia nam quae pariatur. Placeat eum blanditiis rem ad sit fugit nihil ut reprehenderit. Tempora voluptatum quo illum dolor aliquid commodi autem accusamus. Nemo rem assumenda nemo officia reiciendis quas optio tempora rerum.

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