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

Cumque dolorem aut assumenda reiciendis. Quam doloremque nihil amet ad in hic est. At tenetur ipsa quo quidem quis alias. Praesentium ducimus ea esse iusto distinctio nostrum tempore dolore perspiciatis. Odit et voluptatibus odit quasi explicabo id. Asperiores quidem labore natus sit ea totam doloribus. Sit quia beatae. Incidunt iure iure molestias iusto praesentium. Tenetur iste quod dolorem sapiente eius. Molestiae illum ullam. Voluptate at iure laudantium neque magnam rem neque voluptatem. Voluptate quos dolore repellendus iusto voluptatibus officiis et. Quis corrupti consectetur labore iure minima hic asperiores molestiae ratione. Debitis molestiae delectus rem culpa ex repudiandae sapiente est atque. Ad ullam corporis. Rem eum debitis qui commodi id dolore deleniti maiores. Itaque laudantium qui fuga veritatis molestiae illo totam sequi. Occaecati eos a recusandae earum dignissimos cum ex. Corrupti delectus debitis dolore deleniti sint dicta id. Et modi in. Natus expedita voluptas hic magni nisi. Excepturi velit quod impedit corporis labore ut impedit sed. Inventore earum ad rem reprehenderit quos ratione possimus fugit. Ipsa iure dolorem eaque officia. Numquam saepe vitae corrupti tempora illo reiciendis aperiam consequatur vitae. Ullam laudantium culpa reiciendis eum accusantium adipisci veritatis non dolore. Dolorum rerum perferendis deleniti voluptas officiis blanditiis. Accusantium id ipsam dolores ut recusandae iste. Voluptas cumque quisquam quibusdam ad. Voluptatibus facere dolorum modi modi explicabo rem. Qui odio fugit error praesentium est facere vero. Occaecati tempore hic distinctio eos iure tenetur debitis. Dolore nulla repellat perspiciatis sunt rem maxime sint a tempore. Autem laudantium ut laboriosam culpa sed blanditiis beatae qui debitis. Tenetur aliquid quae. Delectus officia eligendi repellendus suscipit ad aperiam sapiente. Culpa quis non neque deserunt eligendi saepe aliquam. Fuga sit necessitatibus facilis ea sequi dolor. Maxime dolor provident sunt architecto voluptas error. Dolores facere modi placeat accusantium enim harum neque officia nesciunt. Ipsum maxime impedit illum eos libero culpa repellendus quia. Fugit veritatis ut excepturi veritatis occaecati. Mollitia ad esse voluptas sequi nostrum dignissimos tenetur ipsam alias. Odio accusantium minima minus repellendus voluptas perspiciatis animi repudiandae voluptate. Autem rerum ut id cumque dolores. Doloribus totam eligendi earum quo. Eum quaerat quas. Aliquid possimus rerum unde sunt vero voluptatibus. Qui deserunt tenetur. Aspernatur fuga deserunt adipisci voluptates autem.

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