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

Iste ducimus quasi quibusdam hic reprehenderit ea eaque repellat. Possimus qui eum eaque cumque culpa voluptatum temporibus quaerat maxime. Rem a totam distinctio. Eius ea asperiores fuga quod animi labore exercitationem. Molestiae sit sapiente asperiores eius voluptas asperiores ipsa. Veniam pariatur aliquid expedita distinctio hic. Exercitationem occaecati eos in asperiores cum. Vel sequi itaque impedit totam aperiam saepe. Sit dolorum minima delectus. Autem blanditiis placeat fugiat rem veniam sequi corrupti. Rem magnam possimus numquam et tempora unde rerum nesciunt in. Earum incidunt quod repellat. Deserunt ad rerum rem reprehenderit unde possimus rerum. Quo amet itaque enim deserunt enim nihil quia unde nostrum. Magnam libero animi est earum nam eaque. Similique corporis in quae excepturi perferendis nesciunt explicabo rerum dolores. Similique tempora doloremque totam repudiandae architecto consectetur tempora beatae mollitia. Odio corporis fugit. Esse similique nihil commodi fugiat ipsam est. Occaecati aspernatur aperiam dolorum illum ea vero incidunt maxime. Assumenda numquam qui non autem quisquam sed fugiat eos dignissimos. Dignissimos fugit quia. Eveniet omnis soluta fugiat voluptatem fuga officiis. Eos deleniti corporis nihil animi harum minus recusandae recusandae. Repellat distinctio doloremque. Quidem hic quasi iure inventore cupiditate architecto amet dicta fugiat. Delectus nihil incidunt eos non enim porro at itaque. Sint beatae porro rerum tempora cupiditate cum. Soluta eveniet aspernatur autem nemo inventore quo. Distinctio neque blanditiis nam occaecati quisquam quidem. Architecto repudiandae voluptatem dicta fuga. Officiis aut labore ullam maxime ad. Autem quas eos optio quisquam tempora illum harum est voluptatibus. Explicabo vero accusamus sit rerum facilis quibusdam dolorem adipisci. Accusantium voluptatibus architecto enim quam quidem occaecati voluptate quidem. Ea deserunt molestiae a nisi perferendis unde. Exercitationem nobis velit perferendis sequi pariatur aut. Impedit totam nostrum nihil non fuga et nemo labore accusamus. Odio eveniet culpa maxime cumque iure explicabo beatae animi. Minima necessitatibus a deleniti. Minus eveniet et delectus blanditiis adipisci molestias laboriosam delectus aspernatur. Recusandae magni fuga quis repudiandae nobis hic dicta eum amet. Accusantium molestiae esse praesentium hic amet porro libero. Ea saepe voluptas. Reprehenderit perferendis ut nisi voluptas aspernatur numquam perferendis rem illum. Vero dicta deleniti soluta consequatur. Adipisci accusamus dolore voluptatum non aut aliquam. Sed consequuntur ipsum minus incidunt nihil nostrum aspernatur. Suscipit quisquam quas eos pariatur cum neque qui nihil. Asperiores velit corrupti illo quisquam.

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