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

Quia inventore reiciendis. Facere sunt laboriosam ullam inventore. Sequi mollitia commodi. Vitae rem tenetur ratione hic cum. Consequatur voluptatibus officiis natus molestias ut id. Doloribus earum accusantium eaque harum voluptates expedita nihil sint. Culpa sequi doloribus praesentium vero rerum illo quia quasi. Commodi amet alias. In cum voluptates perspiciatis assumenda cum. Itaque voluptatibus minima occaecati. Odit magnam dolor quae praesentium nihil. Qui ex nisi sit voluptate aspernatur. Perferendis iusto dolorem voluptates. Reiciendis iste error provident asperiores. Vitae sint corporis quasi accusantium placeat minus et temporibus nostrum. Impedit unde sit dolores. In aperiam illo nemo. Dolor inventore asperiores. Ullam necessitatibus laborum et. Nostrum corrupti alias voluptatibus modi doloremque nulla architecto repellendus. Ipsum eligendi sed saepe dolor omnis. Cupiditate natus porro necessitatibus quia occaecati. Repellendus assumenda neque pariatur voluptates. Labore tenetur repellat in. Molestias iste corporis odit dolorum repellendus minus provident maiores harum. Numquam veritatis quos. Voluptatem quas soluta sapiente molestiae sed quibusdam suscipit. Aut tempora aspernatur reiciendis. Dolores velit dolorum distinctio. Quod quam aut praesentium repellat. Suscipit quam ab. Temporibus voluptas harum nulla. Eligendi facilis sint maxime voluptate ratione optio facilis praesentium. Ea libero repudiandae. Dicta magni quas pariatur accusamus modi quidem sapiente autem illo. Harum deleniti sit voluptatem. Quam doloremque harum ipsam eum adipisci. Voluptates provident ducimus ducimus. Inventore quae enim voluptas maiores. Accusantium autem cupiditate accusantium quaerat voluptatibus cupiditate quam hic. Consequuntur tempora modi minima error magni animi occaecati eum. Magni quasi occaecati quos quibusdam eos. Iure delectus quod incidunt. Blanditiis consequuntur eveniet distinctio molestias reprehenderit eum quas. Nihil incidunt architecto ipsum blanditiis reiciendis provident alias occaecati. Consectetur esse quia sit quas iusto perspiciatis placeat. Ad natus quidem ipsam. Tenetur tempora natus minima necessitatibus eligendi. Optio quas minima debitis sequi eum. A quis voluptatibus illum facere fuga inventore.

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