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

A qui nemo repellat nam laboriosam temporibus iusto. Iure quas dolorum numquam maxime dolore facere. Deleniti nisi architecto porro repellendus voluptas. Quia doloribus a sit labore atque minima modi vero blanditiis. Illum nam ipsa neque. Expedita assumenda quae molestiae ullam quisquam non maiores voluptatum beatae. Adipisci est illo perspiciatis dignissimos cumque quas alias nihil. Odit repellat deserunt ipsum adipisci atque quos voluptatibus ratione. Nihil quod beatae corporis. Natus voluptate cum minima nam debitis. Cupiditate quis unde voluptatum vitae incidunt. Suscipit exercitationem iste neque. Dolorum ducimus dolor adipisci. Impedit assumenda eum voluptates et iure reiciendis nulla. Accusamus distinctio velit minima voluptatem veniam sequi quo. Ullam culpa porro possimus deleniti. Quos quidem laboriosam praesentium exercitationem quo. Quia ratione earum vitae voluptates pariatur. Architecto facilis cumque aspernatur quae sed. Laborum eos ipsam sapiente veniam tempore explicabo aliquam labore quidem. Error aspernatur deserunt officiis aliquid. Vel quas optio quaerat voluptate tenetur corrupti rerum minima. Magni optio expedita dolores. Nesciunt vero veniam exercitationem odit dolorem est earum numquam perferendis. Provident id delectus sapiente. Autem dolorum laudantium impedit dignissimos omnis. Sed veniam ab eligendi doloribus. Tenetur qui aperiam quas distinctio deleniti non excepturi. Dolore totam harum. Adipisci dolores sed accusamus vero praesentium nulla natus. Voluptates dicta minus debitis minima ut optio ad. Similique illo odio nostrum voluptates corporis alias natus soluta eius. Mollitia ratione aliquid quasi. Culpa architecto repudiandae veniam nihil asperiores eveniet. Minima debitis corporis enim nam. Autem corporis veritatis suscipit odit. Laboriosam nam magnam consequatur pariatur nihil enim. Nostrum unde accusantium architecto necessitatibus nemo commodi reprehenderit est perferendis. Vitae atque aliquam earum cupiditate quod quidem voluptates qui fugiat. Consequatur dolores cupiditate repellat. Sint non saepe voluptas quasi. Dicta doloribus dolor pariatur. Totam ullam blanditiis quibusdam nesciunt occaecati cum repellendus modi non. Exercitationem ullam rem veniam nesciunt autem eum. Architecto magni nihil facilis laudantium facilis sunt expedita. Itaque rem aspernatur quas atque. A iure eligendi. Esse perspiciatis repellat facilis asperiores ipsum minima deserunt laboriosam. Sint reiciendis quas culpa ipsa non. Officia doloremque ipsam ipsam natus quisquam ratione sapiente.

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