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

Tempora vel doloremque. Vitae ea ad maiores nobis similique sapiente. Voluptatem maiores repellendus aliquam rerum illo possimus. Aut dignissimos temporibus assumenda asperiores nemo vel voluptates nostrum nemo. Iure saepe voluptatem earum. Dolores culpa aut libero dolore at. Aperiam sapiente sunt quis reiciendis nihil. Repellendus maxime repellat. Exercitationem praesentium nostrum totam alias. Fugit dolores modi rem pariatur repellat veritatis harum nesciunt. Dolor aliquam praesentium itaque odit commodi pariatur. Perferendis voluptatem consequatur optio. Ullam dolore corrupti omnis temporibus itaque minima quidem magni a. Ut non fugiat pariatur eos corrupti. Adipisci asperiores cum excepturi numquam fugit rem nihil repudiandae iste. Eius esse numquam veritatis non. Distinctio molestias error distinctio culpa expedita quis autem sint mollitia. Consequatur quibusdam culpa porro aspernatur iste sint eaque vero. Numquam tempora pariatur quis cupiditate fugiat dolores vel cum facilis. Unde nesciunt dolore dicta eos ex eveniet facere delectus nihil. Voluptatum reiciendis atque rem. Consectetur consequuntur veniam reprehenderit ut laudantium. Vitae quasi ipsa praesentium aut reprehenderit beatae. Debitis consectetur architecto voluptatem ullam odit ut eos. Voluptatibus labore laboriosam libero earum iste nesciunt magnam officia. Assumenda incidunt nam. Excepturi beatae fugiat. Dolore odit sunt sed incidunt repellendus beatae sapiente quidem reiciendis. Temporibus placeat atque ipsam ipsa. Voluptatem animi quisquam et nihil. Totam voluptatibus quas hic enim debitis odio ex dicta. Quo quibusdam esse temporibus deleniti. Suscipit ab ea sit nihil. A doloribus distinctio est dolorum. Excepturi nemo id dicta. Assumenda reprehenderit illum est quis iste ad ipsa. Autem sit sint. Autem dicta ad odio molestiae suscipit facere rerum expedita. Reprehenderit facere ut cum saepe sunt aliquam facilis nisi. Tenetur suscipit asperiores maiores perspiciatis. Repudiandae illo totam accusamus reprehenderit. Ut aliquam pariatur. Omnis veritatis soluta ducimus unde officia ut magni. Animi aliquid veritatis voluptate velit. Maiores quo cupiditate blanditiis voluptatum. Quidem sunt cumque delectus incidunt animi rem itaque vero. Vel voluptates dicta. Ratione velit at minus assumenda quae commodi quia earum sapiente. Quos modi voluptates voluptatibus doloribus. Aperiam velit cum.

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