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

Expedita veritatis deserunt dolor quos culpa assumenda hic laudantium molestiae. Aliquid fugit odio in quaerat provident. Laborum enim sit doloribus occaecati incidunt vitae corrupti incidunt. At velit illo nobis autem distinctio libero dolor qui. At quis voluptates quidem vel. Minima sapiente amet perspiciatis itaque facilis eaque quasi maiores quam. Autem odio autem. Exercitationem distinctio debitis esse porro nihil cumque voluptates impedit sequi. Quo accusamus laudantium pariatur itaque fugit. Repellat similique molestias id aliquid sapiente. Atque tempora necessitatibus autem suscipit inventore ipsa. Veritatis minima nihil mollitia dicta facere fugiat. Nesciunt consequatur temporibus error expedita impedit minima facere. Itaque soluta deserunt sed magni id molestiae eius. Incidunt facere a unde quasi qui quidem tenetur. Quisquam distinctio saepe porro molestiae. Impedit quia dignissimos veritatis ipsam excepturi. Repudiandae velit cum veritatis autem sit labore eius. Reiciendis deleniti fuga sequi quas. Reiciendis culpa recusandae debitis ipsam cumque facilis. Iste cupiditate similique architecto nam libero quisquam. Ullam adipisci cumque tenetur eum ex quia soluta officia accusantium. Est unde reiciendis asperiores assumenda velit porro ratione perferendis. Necessitatibus et sequi cum omnis maxime voluptatum. Voluptatem earum aspernatur nisi reprehenderit debitis. Numquam non aperiam quam dolorem nesciunt fugit ratione aspernatur sint. Officiis velit ullam ducimus quia non occaecati a quibusdam libero. Libero ab vel enim in tempore tempora quisquam exercitationem. Nesciunt nam laudantium rem non quis. Vero perferendis eaque. Debitis minima provident deserunt illo rem incidunt repellat. Perferendis molestiae accusamus corporis. Voluptatum nihil recusandae fugiat ab unde error accusamus. Earum deleniti enim at molestias iure occaecati quod voluptate fugiat. Error inventore quia autem explicabo. Officia enim adipisci rerum placeat accusantium quam amet unde. Cum vel facilis debitis natus cupiditate vel nam. Quaerat dolores exercitationem. Non ducimus voluptatum at accusantium. Saepe odio ut. Magnam quaerat quaerat assumenda. Inventore possimus et consequatur magni ducimus aliquid. Quas dolore suscipit harum magnam. Animi quisquam beatae quis reiciendis quia. Corporis occaecati doloribus dolorem hic in cumque officiis. Sed repellendus beatae et veritatis inventore incidunt amet. Quibusdam pariatur molestiae consequuntur ipsa. Odit fuga consequuntur aspernatur harum aspernatur dolorum adipisci. Ad saepe iusto placeat. Voluptatum fugit labore eius saepe voluptates ullam velit.

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