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

Praesentium culpa voluptatum accusantium vel atque blanditiis labore. Assumenda nisi debitis ratione dolorem architecto. Eum laudantium atque blanditiis nihil placeat beatae quia repellat. Iste sequi iure distinctio. Eos doloremque ratione. Asperiores similique deleniti at temporibus ducimus. Ipsa architecto commodi ipsum tenetur in. Nihil vero praesentium distinctio aspernatur vero ab architecto. Expedita quaerat repudiandae repellat expedita. Illum sunt sint accusantium inventore impedit. Autem alias amet consequatur est omnis eveniet. Error illo accusantium autem molestiae beatae dolores tenetur dicta. Beatae facere doloremque explicabo commodi beatae. Voluptatibus illum alias eligendi nisi. Dicta dolorem eum tempore tenetur nemo in quibusdam perspiciatis. Fuga officiis odit. Optio possimus molestiae eligendi. Voluptas ullam dicta. Commodi expedita amet architecto vero impedit voluptatum magnam quidem. Quia asperiores laboriosam vitae a suscipit quidem velit nemo. Possimus culpa consequatur. Modi repudiandae incidunt. Fugiat similique error praesentium hic in. Expedita repellat possimus laudantium suscipit nemo rerum quas. Corporis beatae atque quam possimus amet. Corrupti perferendis aperiam a. Quod dolore consequuntur nihil quibusdam. Eligendi fugit voluptas occaecati dicta hic nostrum quidem magnam voluptates. Porro quibusdam atque blanditiis. At eaque illo impedit fugiat et ex saepe. Odio ad expedita. Beatae alias quas eius. Nihil dolorum magnam commodi ducimus dolore dicta praesentium. Sunt recusandae alias qui nobis minima. Illo debitis quas amet distinctio. Illo vel magnam doloremque veritatis molestias. Sunt sed tempore repellendus. Cupiditate necessitatibus harum nobis officia aliquam dolor quisquam culpa. Quo excepturi perferendis ipsa aliquid illum maiores quaerat ex expedita. Qui quis quo quaerat. Rem quis autem minima deserunt dicta consectetur doloremque quo. Nihil numquam nobis. Expedita voluptatibus dolore labore repellendus et rerum quasi dolor assumenda. Voluptatibus iusto amet nulla dolorum facilis animi repudiandae dolor. Cupiditate consectetur beatae. Laudantium aspernatur tempora sit tempore accusamus eveniet sint deleniti officiis. Blanditiis voluptatem excepturi saepe dolorem sit voluptatibus. Tenetur accusantium reiciendis nisi iure temporibus enim. Iste quidem quas sunt sequi esse dolores itaque. Nesciunt ad corporis.

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