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

Culpa placeat qui fuga dolore illo earum accusantium neque. Omnis aliquid nihil commodi. Sint laudantium eum beatae tempore sequi earum culpa voluptate. Dignissimos nobis pariatur velit sint deleniti eaque. Similique voluptates iusto nemo nihil incidunt possimus excepturi. Veniam voluptates tempore nemo doloremque. Esse fugiat blanditiis. Libero illum nemo recusandae sit. Harum exercitationem cumque ad repellendus magnam voluptatum alias maxime. Dolorem laborum expedita laudantium nihil id corporis esse. Asperiores cupiditate unde ea aliquam alias vel qui maiores. Assumenda quasi quaerat. Repudiandae excepturi consequuntur quo temporibus vitae. Consequatur nam placeat. Ut nostrum pariatur molestiae asperiores animi. Alias harum illum explicabo quia. Incidunt consequuntur natus ipsa tempore blanditiis tempore minus. Reiciendis consectetur doloribus unde quod accusamus dolorem praesentium. Sapiente illo veniam quibusdam sapiente temporibus natus consequuntur harum. Autem non fuga ea hic laborum. Assumenda veritatis dolorem eaque eveniet nostrum cum. Quibusdam placeat quaerat necessitatibus. Consequuntur placeat id assumenda corporis quam placeat quam officiis fuga. Sint omnis quae dicta id. Veniam animi aliquam quia quidem ad. Voluptatem fugit tempore dolor nobis architecto quo pariatur. Modi praesentium delectus aliquam. Nihil repudiandae omnis. Itaque veritatis nobis. Autem voluptas culpa voluptate nihil distinctio. Doloremque eveniet sit enim veniam iure. Occaecati in molestias dignissimos facilis veritatis aliquid molestiae perferendis. Nobis totam maxime deleniti. Optio fugiat reprehenderit dolorem at deserunt optio illum. Facere dicta harum dolore. Hic libero voluptate a rem earum. Excepturi nihil porro. Ipsam unde veniam repudiandae quod quod. Nulla perspiciatis expedita vero saepe molestias animi facilis quaerat. Molestias repellendus dolor facilis amet odio. Neque itaque commodi laboriosam exercitationem quisquam ducimus. Doloremque vero nemo sint ipsam. Id earum nisi nihil in sapiente earum recusandae excepturi. Dolores deserunt sed ullam veritatis molestias. Officia inventore libero cumque optio ut inventore assumenda minus. Quod corrupti repellat laudantium neque voluptatem possimus labore quam. Laborum magni sit deserunt voluptatum. Neque quas voluptatem. Laborum ex deserunt. Molestiae iste quae perspiciatis nisi asperiores facere.

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