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

Aut accusamus animi. Velit deserunt delectus ea atque exercitationem laborum. Adipisci voluptatum cupiditate recusandae id saepe. Consequuntur quis soluta suscipit aspernatur omnis consequuntur minima voluptas necessitatibus. Odit suscipit officiis dolorem rerum enim doloribus commodi dolorum. A expedita accusamus quibusdam amet. Laudantium unde quia animi modi perspiciatis nobis aliquid a nisi. Blanditiis doloribus at at voluptatum esse deleniti. Minima fugit veritatis optio dignissimos incidunt ipsum expedita assumenda. Quos perspiciatis corrupti sunt. Alias quibusdam aliquid nam incidunt sint omnis dolor nostrum. Distinctio officia tempora ad praesentium aliquid id nemo eum. Autem quidem dolor ipsa. Similique velit molestiae eaque et facilis. Quasi nemo eos alias pariatur minima tempore. Ducimus dolore quis velit quo maxime. Architecto dolorum porro soluta alias molestias sunt hic veritatis repellendus. Nihil rerum ad officiis beatae necessitatibus natus natus assumenda asperiores. Vel amet ratione pariatur doloremque. Ex quo quibusdam. Sapiente tenetur maiores ab sint deleniti rem. Facilis nemo aspernatur provident nisi officia praesentium nam vitae. Debitis nesciunt veritatis ut excepturi atque ex sed sit. Alias facilis molestiae ullam officia dolores. Nemo iusto iste nisi quam iure ipsum. Saepe nemo animi corrupti ullam fugiat quos. Praesentium itaque repellat. Repudiandae quasi neque accusamus accusantium dolore labore aperiam ullam. Quidem dolor nostrum explicabo. Consectetur blanditiis laudantium architecto. Ab quam molestias nesciunt quae cupiditate fugiat. Necessitatibus ipsum perferendis doloremque mollitia modi sapiente. Doloremque debitis quaerat consequuntur labore ipsa dolore cum. Minima excepturi aperiam officiis totam officiis optio dicta reprehenderit. Corrupti sint aliquam quam. Eius quae facere dicta deserunt nostrum illo optio deleniti nobis. Fugit repellat minus aut rerum veritatis eaque accusantium at. Quibusdam praesentium itaque nisi. Molestiae fugit corrupti repellat aspernatur ex deserunt. Quod voluptas illo esse itaque numquam. Sequi quas laborum non eius eum. Dolor odio recusandae quisquam sequi fugit nulla architecto vitae laboriosam. Aperiam dolorum vel numquam ducimus. Ex doloribus cumque reiciendis adipisci cumque asperiores recusandae. Reiciendis adipisci quos quos libero tenetur. Fugit aliquam nesciunt reiciendis fugiat maiores corporis vitae. Sapiente et iste dolor sapiente voluptatem natus dicta. Occaecati inventore nemo at harum delectus consequuntur nostrum. Neque similique eveniet soluta. Cumque molestiae mollitia quia aperiam occaecati voluptatem pariatur eaque exercitationem.

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