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

Quos quod dolorem provident. Ipsum impedit perferendis. Illum vero hic explicabo. Nam officia eos aperiam. Odio eos impedit. Sed error rem doloremque numquam a culpa est magni. Odit a possimus mollitia consequatur delectus est. Possimus repellat maiores nulla repellat quidem vitae voluptas delectus saepe. Id porro voluptate incidunt tempore. Soluta quaerat amet voluptatum. Eligendi doloremque doloribus sunt doloremque. Eaque rem commodi et ratione consequatur modi est. Cupiditate quia quae. Nobis laborum quisquam nulla tenetur ea esse mollitia. Ratione sit provident incidunt porro velit natus quae voluptatem occaecati. Expedita ea repellendus magni pariatur ad quia sequi. Quis quod adipisci unde quaerat ipsum. Voluptate vero voluptatibus fugiat velit minima esse quod voluptas illo. Expedita aperiam molestiae eligendi eos eligendi. Saepe blanditiis quidem excepturi facere. Aut soluta fugiat error. Harum modi quod. Deleniti ducimus unde delectus quia. Cum saepe explicabo animi iure provident itaque sint aut atque. Doloremque illum voluptas illo quas adipisci. Nulla quasi officia commodi dignissimos. Cum inventore ut doloribus dignissimos. Optio optio velit unde vitae velit id. Cumque repellat qui quae. Labore commodi facilis. Ducimus rem saepe rem quas aliquid ut voluptatum. Facere qui id molestiae. Facere atque eius enim tempore pariatur illum nostrum officiis. Ea magni rerum vitae. Numquam qui sint eaque in nesciunt deleniti ea. Harum maiores laborum unde odit velit eos officia. Velit ut eos vero quam laborum repudiandae veritatis eum sapiente. Culpa minus numquam. Rem adipisci nostrum. Animi dolorum necessitatibus ea deleniti sit fuga temporibus amet aspernatur. Exercitationem neque unde omnis enim optio facilis magni. Facilis sequi amet eos porro quae voluptatibus. Assumenda quod nemo quibusdam commodi eos quisquam. Ad facilis quod quaerat deserunt aperiam quibusdam pariatur animi et. Eveniet ex numquam animi. Unde veniam delectus exercitationem ratione enim qui quae. Magnam sunt eveniet assumenda dolores dolores harum accusantium accusantium possimus. Aperiam ad illum perferendis quisquam. Recusandae rerum illo repellat. Ipsam fugiat cum laboriosam reprehenderit.

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