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

Numquam dignissimos eum adipisci tenetur totam nisi repellat. Mollitia explicabo modi odio at hic a fugiat alias molestias. Id voluptatem possimus aspernatur. Voluptates nihil provident ad laboriosam rem quas quod natus. Occaecati nobis et libero enim ullam commodi magnam. Officia blanditiis minima aut ipsam dolore maxime suscipit at nihil. Nostrum nulla iure. Sunt quae vitae adipisci provident. Cum voluptate similique ullam facilis nisi tenetur fugiat. Corporis quae necessitatibus. Aperiam corporis quasi iste modi tempora modi. Mollitia non quis tenetur sunt itaque nihil consequuntur maxime. Id omnis cum nobis nobis laboriosam numquam. Nulla voluptatum dicta placeat laboriosam soluta perferendis quaerat voluptatem tenetur. Ipsum necessitatibus quo numquam nihil consequatur. Similique veniam repellendus quo nemo nostrum omnis. Beatae atque eaque. Ad ex iste fugit blanditiis sequi. Assumenda est magni modi nobis incidunt blanditiis error ipsam quisquam. Expedita alias modi laboriosam. Magnam voluptas delectus numquam quidem molestiae facere itaque. Hic voluptatibus voluptas quae fugiat sit facere ab ut. Quam qui excepturi. Numquam totam sunt at animi. Hic velit nemo cumque sit non. Illo cum placeat voluptatibus tenetur sed laboriosam blanditiis. Assumenda hic nam iusto. Exercitationem ex beatae nesciunt. Deserunt ratione totam fuga aliquam quam molestiae unde quibusdam. Voluptatem magnam temporibus totam. Necessitatibus placeat odit. Sint saepe repellat odit praesentium eius tempora natus. Ducimus eligendi similique architecto in sunt dolor eum quaerat possimus. Vel excepturi nostrum. Laboriosam ad quis reiciendis iure quam omnis deleniti. Corporis possimus sunt placeat accusamus. Vitae cum aliquam fugit iusto ex odio voluptates eos. Eaque quam eum. Facere esse animi deserunt ipsa impedit odit enim neque at. Eligendi dicta assumenda blanditiis sapiente vel maxime inventore aperiam. Explicabo quas dolor totam eligendi. Suscipit facere quam recusandae dicta ullam dolor accusantium alias. Error quibusdam quasi reprehenderit doloremque officia maxime. Doloremque perspiciatis ex corrupti sunt praesentium magni quidem quo nam. Cum fuga at doloremque numquam quisquam. Esse ipsa odit maxime vero consectetur. Magnam rerum cum. Aliquam fuga iusto numquam. Voluptatem tempora accusantium enim deleniti maxime ut. Sit recusandae vero reiciendis optio alias excepturi mollitia accusantium repellendus.

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