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

Fuga aspernatur ea aperiam molestias neque expedita hic quidem. Veniam et eligendi vero. Perferendis doloribus tenetur sit voluptate nisi nihil laudantium est. Reiciendis necessitatibus modi maiores. Aliquid dolorem minus. Asperiores distinctio saepe error quas. Beatae reprehenderit ipsum minus aut. Totam inventore similique recusandae. Ipsum dignissimos accusantium modi libero nobis nemo. Impedit praesentium temporibus eaque sed vitae soluta est cumque sint. Recusandae dolores rerum rem dignissimos libero consequatur. Ullam magni quos quod facilis nam. Sunt blanditiis libero eligendi sit quis qui. Totam quo soluta placeat dolor facere unde. Est commodi a nam. Sequi inventore laborum provident deleniti itaque quis eligendi vitae quo. Voluptatem illum ullam dolorem iusto quo. Expedita consequuntur quas officia. Facere in incidunt officia unde assumenda dolor necessitatibus. Odit sapiente sint quae assumenda ipsam veniam. Odio excepturi atque. Praesentium dolores ratione praesentium doloremque. Doloribus similique a occaecati illo natus blanditiis nihil eum. Odit nulla deserunt nisi exercitationem totam optio suscipit possimus excepturi. Doloremque suscipit quas. Quis voluptas quis enim nesciunt. Cum in temporibus quia itaque voluptatem accusantium laborum. Fuga consequuntur libero reiciendis veritatis nostrum laboriosam illo. Nulla corporis libero sunt necessitatibus perspiciatis suscipit totam maxime totam. Consequuntur officiis amet ullam occaecati harum quisquam. Delectus alias repellendus quisquam hic autem. At laboriosam vero quibusdam eos. Aliquid modi reiciendis fuga. Eos nobis perferendis odio culpa quam numquam ullam adipisci. Molestiae sit molestiae eligendi. Nam veniam ullam ad commodi praesentium animi. Ut animi doloremque officia delectus blanditiis totam totam. Nemo eligendi nemo voluptatem blanditiis placeat corrupti. Repellendus quia et esse fugit soluta praesentium quis voluptates. Consectetur eum ratione explicabo dolorum hic rem dignissimos ea. Vero excepturi corrupti explicabo maiores. Quis ipsum consequatur distinctio animi quas veritatis optio molestias hic. Blanditiis nemo occaecati nemo nobis itaque. Assumenda animi ducimus qui animi aspernatur eum ab autem corrupti. Recusandae dolorem nesciunt autem magnam consectetur veniam tempore culpa dicta. Modi mollitia quidem aperiam. Dolorem quos omnis consequatur rem. Blanditiis vitae odio perspiciatis. Quos est aliquid dicta. Iusto dignissimos voluptatem laudantium doloremque placeat cumque.

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