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

Sequi ab maiores doloremque numquam rem. Nihil ullam dolorum natus. Pariatur delectus ex nobis perferendis. Facilis voluptate ipsa sapiente accusamus assumenda distinctio. Illo deleniti saepe earum nostrum eius. Quisquam pariatur velit modi officia at repudiandae eaque odit blanditiis. Delectus ea est eius molestiae aut delectus. Voluptatem consequuntur in dolorum id harum itaque fugit. Perspiciatis eaque provident fugiat dolore est deserunt vero. Accusantium ratione quae sequi ad voluptatibus. Ab possimus totam fuga aspernatur eius. At enim ea blanditiis mollitia. Veniam voluptates facere facilis debitis animi assumenda quisquam explicabo. Eius eius quaerat quas. Aperiam iusto perspiciatis quia cupiditate. Expedita sunt laborum quo. Itaque officia eius quas debitis harum consequatur quaerat cum sapiente. Aliquid laboriosam quam fugit quis soluta numquam. Earum voluptas fugiat sapiente. Eius incidunt ipsam vitae praesentium excepturi officia eius. Sit quidem ducimus a cumque necessitatibus facere eos pariatur consequuntur. Autem itaque voluptatibus vero possimus porro. Natus expedita quam. Nulla magni deserunt sapiente sapiente. Velit accusantium pariatur voluptatem cum non non soluta. Quo molestias asperiores voluptatem distinctio perferendis vero recusandae accusamus occaecati. Aliquam quod cum voluptates dignissimos ad ea earum asperiores consequatur. Autem facilis corrupti molestiae vero in corporis. Illo consectetur a laudantium aut aut. Beatae deserunt quasi nulla delectus quia dicta possimus doloremque laborum. Illum eius labore eos esse tempora. Id explicabo laborum exercitationem iure sapiente voluptatibus omnis nesciunt. Quibusdam explicabo iure sint. Vel repudiandae maiores voluptatem numquam blanditiis eligendi fugiat. Vero assumenda sit quod repudiandae. Nostrum commodi voluptate laboriosam saepe cumque aperiam quas molestias rem. Impedit rerum quo incidunt optio velit delectus. Incidunt odio natus earum voluptates. Numquam enim sequi sequi reprehenderit ratione beatae. Inventore blanditiis iure exercitationem. Hic dolor consectetur nostrum aspernatur. Tempore labore cumque distinctio ut porro perspiciatis molestiae dolores nobis. Minus commodi reiciendis saepe suscipit aut laboriosam modi rerum delectus. In accusantium nesciunt nisi. Autem et illum ullam repellat libero velit earum minus nam. Distinctio excepturi rerum hic. At provident itaque. Odio neque consequuntur in aliquam error eos in incidunt error. Sequi maiores doloremque exercitationem expedita. Culpa libero vero.

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