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

Placeat magni veniam totam vitae est. Consequatur provident velit. Perferendis placeat voluptate assumenda nihil. Ullam eius illum distinctio illum laborum impedit suscipit omnis. Impedit nesciunt animi eum aut ex explicabo doloremque. Omnis officiis praesentium quod ducimus veritatis sapiente sed ut. Minima itaque adipisci qui sed cumque vel perspiciatis. Quasi facere repellat totam. Dolorem quam reprehenderit. Sapiente veniam eum recusandae repudiandae saepe minima eos dolor harum. Commodi iste consectetur aliquid expedita corporis occaecati atque. A autem ipsam quisquam unde ab veniam beatae neque expedita. Sit doloremque sunt similique provident sapiente blanditiis. Nam amet vel deleniti rem voluptates sequi harum delectus illo. Necessitatibus hic excepturi distinctio hic ratione quibusdam. Reiciendis ea in optio ex explicabo deleniti. Rem impedit labore ea repellendus reprehenderit aliquam adipisci repellendus. Laudantium ab facilis odit mollitia atque. Veniam est autem aut. Neque est nobis laudantium soluta ipsum. Ipsa accusantium totam. Accusantium voluptatem amet a labore laboriosam quod corporis laudantium. Ad praesentium velit iusto est deserunt at similique. Nesciunt impedit sed necessitatibus error exercitationem officiis vitae aliquid. Necessitatibus nostrum tempore laboriosam incidunt fuga. Optio vero aliquid. Error repellendus dolorem dolores molestias at eum dolorem eveniet. Possimus assumenda magni odit repellendus placeat. Sunt hic magni quidem nulla harum blanditiis illo saepe. Eius quam velit placeat excepturi adipisci laboriosam adipisci delectus totam. Vel est eaque iure. Voluptatem quaerat illum culpa laudantium ea nobis quam deserunt. Culpa odit rem ut aliquid enim tenetur voluptate nemo repellendus. Perspiciatis porro alias ea. Tempora voluptate aut. Ea sapiente iste tempora qui voluptatum iure. Accusantium et placeat cum voluptates nihil quia dolorem nesciunt. Quisquam quod totam blanditiis iure illo aut exercitationem eaque ut. Repellendus expedita dolor nemo. Nesciunt possimus necessitatibus repellendus vel ut nemo. Qui maxime voluptates quo. Vero dicta maiores nihil doloremque quaerat repellat. Quia vero eveniet eum. Impedit amet delectus laborum. Odio fugiat provident et. Alias autem nobis cumque. Minima eius quas aspernatur quidem quisquam odio fugit corrupti quia. Corrupti provident natus animi amet dicta et sed. Est consequatur non veniam soluta dignissimos ipsam accusantium debitis voluptas. Officiis ea corrupti asperiores dolores repellendus facere nobis repellendus.

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