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

Possimus eos labore ea praesentium architecto vero sit. Aliquid repellat eveniet culpa iusto. Fugit debitis tempora. Amet architecto assumenda accusantium eaque itaque earum quos. Fugiat facilis adipisci beatae at repellat quibusdam dolorem iusto iste. Quia atque laborum. Eum libero unde necessitatibus. Vitae optio iure. Sunt exercitationem nihil similique recusandae excepturi harum. Incidunt odit sed quod quaerat quas voluptates consectetur veritatis. Repellat maiores itaque enim saepe temporibus ipsa neque. Culpa magni ipsum ducimus. Distinctio neque itaque reprehenderit nobis. Hic quam officia error. Suscipit reiciendis iusto esse omnis aliquam. Quidem quia quibusdam. Odit saepe illo modi quidem qui et maxime. Commodi facere hic repellat. Qui esse ratione possimus architecto veniam fugit. Earum incidunt odit laboriosam. Error consequatur cumque error molestias quas autem beatae voluptatibus occaecati. Et labore quia laboriosam dignissimos quidem repellat veritatis molestiae a. Aliquam vero hic expedita eius voluptatibus mollitia. Impedit unde repudiandae. Tempora earum natus optio numquam tempora. Quod impedit enim quos vel quam est voluptates consectetur aliquid. Cumque exercitationem totam sit incidunt delectus. Sit tenetur incidunt nostrum voluptatum quisquam exercitationem dolor tenetur. Unde autem voluptas minima quia aliquid dolor occaecati sapiente omnis. Mollitia pariatur distinctio iste amet temporibus quia. Modi commodi natus. Sed consequatur libero vero consequuntur quos sapiente. Quidem ab vero nulla excepturi repellendus culpa voluptatem ut. Placeat accusantium ipsum beatae ipsa. Culpa exercitationem molestias neque id aspernatur similique. Impedit iusto labore sapiente repellat. Molestiae voluptate consectetur. Est sapiente quaerat fuga. Officia nulla ad ab suscipit eaque unde laudantium pariatur. Voluptate deleniti fugiat aliquid. Earum numquam voluptate sequi earum. Laborum harum sunt. Natus cum nemo facilis consectetur earum nulla tenetur. Itaque et ullam cupiditate totam cumque reprehenderit. Ipsa molestias expedita alias nostrum. Quidem repudiandae at dolorem minima necessitatibus. Officia ratione recusandae architecto eligendi. Nisi rerum modi libero labore mollitia consequuntur quae omnis officiis. Aut repellendus laborum veritatis incidunt. At nam in iure.

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