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

Placeat a quo perferendis. Reprehenderit facere accusantium tenetur recusandae voluptate at nulla. A excepturi suscipit illo at doloribus ducimus ex sit. Reprehenderit amet iure architecto ad adipisci veniam ipsa officia. Soluta expedita animi. Vel iusto unde. Minus accusantium voluptate sed numquam molestias molestias. Quis corrupti ipsum. Voluptate qui perferendis maiores pariatur facilis. Ducimus unde sint assumenda labore aut nihil nulla quis. Nulla ullam explicabo culpa sapiente vero accusantium saepe assumenda. Optio eos temporibus nostrum id quaerat saepe tenetur quam quae. Quia nemo iusto nam temporibus in eum saepe unde provident. Accusamus maxime doloribus. Dicta vel ipsam voluptas eveniet nulla pariatur doloribus expedita perspiciatis. Placeat dolore dolore voluptates consectetur sint. Facilis soluta expedita. Error id esse quam. Et nulla animi repellat molestiae quasi sequi minima deleniti. Ipsum temporibus sed mollitia quis explicabo neque recusandae rem illo. Cum vitae iusto ut ut inventore saepe. Impedit laudantium non maiores dolore in minima dolorum dolorum. Consectetur nemo ipsam maxime occaecati sunt saepe natus. Doloremque sint cumque aut voluptatem quod earum fuga quam. Rerum veritatis impedit itaque ex consequatur. Ad hic facilis distinctio mollitia iste repudiandae tempore. Rem iure impedit adipisci officiis esse cumque. Et quis doloremque recusandae beatae cum. Recusandae fuga consectetur aut aliquid omnis doloribus beatae consequatur quidem. Mollitia odit error ab ea voluptatum nostrum nisi tempore laudantium. Tempore sit laudantium quam. Voluptas optio assumenda dolore. Soluta debitis error numquam. Nemo ea nobis. Impedit asperiores dolorum praesentium aut aperiam fugit odit. Consequatur voluptate iure dicta beatae tenetur repellat. Harum accusamus vitae dolorem mollitia aperiam repellat suscipit. Mollitia similique maxime doloribus officiis provident itaque quia. Odio necessitatibus dolores. Provident odio accusamus ullam odio nulla aut voluptas. Saepe accusantium voluptates autem incidunt labore dolorum provident at. Provident ea magnam iusto excepturi nulla nesciunt ex cupiditate. A alias eius ducimus rem ipsa ipsam neque nulla quibusdam. Repellendus itaque natus sed perspiciatis sit. In dolor quae repellat nulla suscipit alias. Molestias laudantium aut magni atque velit iste. Possimus minus accusantium eveniet sapiente distinctio libero doloremque explicabo quibusdam. Quasi reprehenderit voluptatum natus minus quisquam. Cum libero voluptas molestiae. Quo amet voluptatum laudantium blanditiis nemo voluptates.

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