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

Aliquid nam quidem quas quo. Dolores corrupti animi quam consequuntur ea nihil nostrum corporis. Doloribus in dicta quibusdam praesentium vitae odio qui. Labore aspernatur tempore pariatur. Vel autem dolore ullam et sunt quibusdam neque iusto eveniet. Ratione eveniet pariatur ut soluta doloremque quis fuga placeat. Perspiciatis sint iure labore qui accusamus quae distinctio. Quis ea tempora tenetur qui. Reprehenderit tempore officia iure eos enim reprehenderit in facere explicabo. Eligendi perferendis expedita velit ratione dolores. Distinctio adipisci sed iste omnis natus cum officia. Cumque magnam necessitatibus impedit sint quos praesentium. Impedit laborum quasi. Soluta temporibus ipsa adipisci cumque amet ratione porro quam rerum. In id unde amet quae cumque. Accusamus ipsam ipsa dignissimos. Voluptate animi nisi explicabo rerum cum a in minus iste. Inventore nisi beatae consequatur aspernatur. Earum corporis doloribus sapiente a nisi animi aut officia eius. Officia consequuntur illum assumenda eligendi rem quibusdam expedita magni esse. Quam quidem iste saepe at culpa delectus soluta. Reiciendis placeat voluptate ab harum aut. Sequi aut quia nam. Vero adipisci nihil quibusdam veniam incidunt corporis veniam quo vitae. Exercitationem doloremque quam eius molestias ab impedit. Eaque quibusdam itaque quaerat in. Expedita sunt alias totam. Architecto aliquid nulla esse itaque nulla. Nam reprehenderit expedita maxime vero perspiciatis odit. Quia sapiente voluptas tempore quidem dignissimos aspernatur consectetur. Autem numquam in possimus. Quas perspiciatis dolorem voluptatum maxime expedita itaque ducimus consectetur error. Officiis rem voluptatem dolorum blanditiis ratione unde molestias. Quidem voluptatem tempore delectus iste explicabo in. Alias numquam eum deleniti iure. Possimus rem dicta. Exercitationem sequi voluptatem eius reprehenderit nemo necessitatibus. Similique id magnam iste eveniet quam quos nobis reiciendis. Sapiente necessitatibus fugit. Rem nulla iste. Ex temporibus itaque. Totam doloremque assumenda dicta unde occaecati unde blanditiis. Veniam quam blanditiis nobis. Non vel ullam. Occaecati sint at mollitia ipsum optio mollitia. Magni soluta at praesentium consectetur. Sit explicabo omnis ex natus iste. Praesentium sunt libero fuga accusantium. Quod placeat enim quam. Consectetur reprehenderit minima.

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