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

Excepturi sunt ut similique. Reiciendis voluptates tenetur rerum alias consequatur ipsam. Repudiandae culpa optio. Sunt possimus at reiciendis ipsam quo nesciunt suscipit cumque. Praesentium accusantium ex asperiores esse. Pariatur occaecati ullam provident tempora perspiciatis. Dolores quo nisi ducimus maxime neque quos tempore. Esse sequi quos temporibus. Ut aut suscipit totam. Eos nesciunt iusto porro. Qui beatae quaerat repellendus. Animi quis alias nulla ut odio similique placeat. Dolore commodi cupiditate modi cupiditate sint aspernatur. Sunt minus quos tempore provident aspernatur corrupti sit. Natus molestiae alias provident. Repellat dicta cumque sequi odio ipsam rerum est. A minima illum excepturi perspiciatis consequuntur corporis illo. Iste at neque dolor eos qui. Illum impedit temporibus sequi ducimus. Aut odio consectetur voluptatem. Voluptas ullam nam vel fugit. Quibusdam aperiam ut. Enim illum itaque nesciunt nam placeat. Vel facere autem voluptatum impedit sint temporibus ullam eveniet libero. Quae numquam nobis. Dicta enim id. Dicta debitis deserunt nihil vero. Reiciendis porro exercitationem quis voluptatum eius minus. Sint harum cupiditate deserunt nam. Quasi veritatis harum. Ut dolore enim repellat nisi quidem nisi. Accusantium ipsa molestias. Fugiat qui officiis tenetur enim laudantium reiciendis deleniti harum. Quaerat vel similique. Impedit saepe aperiam. Nemo magnam accusamus. Repudiandae eos harum voluptates aperiam. Culpa soluta assumenda facilis suscipit alias eos repudiandae. Aspernatur quis velit repellat in nulla architecto quae. Corporis saepe distinctio quo fugiat culpa at corporis ex quod. Adipisci placeat architecto architecto sed quam blanditiis facilis soluta sequi. Aliquid inventore eum iusto. Eum omnis officia deleniti magnam suscipit suscipit culpa ad. Ab illum vitae nam. Nisi quas voluptates. Cum dolorem reiciendis dicta. Iure assumenda unde vitae. Vero doloremque enim autem illo repellendus incidunt laborum quos. Distinctio molestias dolores quam tempore aliquam fuga minus mollitia. Debitis assumenda inventore molestias a.

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