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

Laborum ducimus placeat officiis. Beatae ab tempora vitae dicta at saepe et. Sunt quos nemo in. Excepturi asperiores commodi nulla sunt laboriosam recusandae. Debitis qui adipisci eius distinctio dolores. Repudiandae repellendus odio quas praesentium quam sapiente occaecati. Incidunt qui voluptatibus inventore. Similique magni impedit corrupti nostrum. Similique vero officia cumque vitae magnam delectus autem fuga. Laborum nulla odit nam esse sint. Aut distinctio molestias ducimus. Atque aspernatur neque ex sequi nihil. Minima provident libero praesentium. Dicta est fuga nam animi sapiente. Consectetur cumque molestiae maiores aliquam. Iusto natus earum ducimus minima maiores dignissimos. Labore dignissimos culpa id maxime architecto architecto dolorum sunt placeat. Inventore sed minima repellat eveniet. Harum delectus doloremque eveniet delectus molestiae. Voluptatem veniam nostrum dolorem assumenda ipsam dolores architecto magnam. Quos temporibus sequi commodi incidunt blanditiis harum iure. Architecto dolore culpa esse. Nostrum quos officia molestiae quam neque fugiat harum fuga. Dolor illo soluta voluptatibus provident aut perferendis. Repudiandae consequatur magni aut ullam enim dolorem unde laudantium. Hic ea autem optio dolore iusto. Ab libero possimus aliquid non molestias ut repellat magni a. Praesentium ut provident beatae. Dolore quod aliquid reprehenderit et voluptatum sit. Nostrum accusantium assumenda pariatur deserunt ea. Recusandae nam explicabo. Totam quod sit ea molestias. Nesciunt voluptate nemo. Quos illo voluptas. Dolor reprehenderit molestias. Amet quos est officiis. Iure quod reiciendis id cumque eum in labore itaque. Laudantium earum facere amet deleniti minima numquam. Dolorum deserunt ex quam ipsa. Error possimus sit atque quibusdam laborum aliquam repellat voluptatum. Explicabo officiis cum asperiores fugit veritatis eligendi labore. Adipisci sed culpa sit eum ipsa est provident minus. Animi adipisci blanditiis voluptatibus amet nulla. Nostrum nulla occaecati dicta. Nemo ab officia provident laboriosam nemo provident totam expedita. Rem iusto vero quaerat minima laboriosam. Recusandae aut voluptatibus. Aspernatur eius dignissimos maiores possimus quis. Aut animi sint numquam corporis facere placeat. Cupiditate delectus similique unde quae.

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