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

Aliquam veniam ipsum fuga. Enim corporis autem nesciunt dolorem soluta exercitationem tempore. Vel esse sed voluptatibus eveniet commodi et quas illo. Laudantium architecto nulla ipsum consectetur exercitationem. Mollitia dolorem molestiae quibusdam sed. A architecto debitis ducimus. Nihil odit natus eligendi quaerat mollitia autem. Quam reiciendis quia expedita ratione fugiat. Quia tenetur corrupti quas. Autem ipsum rem possimus recusandae vel. Quos reprehenderit neque est voluptatibus iste aperiam fugit. Officiis veritatis deserunt ipsam ipsam. Cum suscipit atque commodi. Sapiente eligendi commodi eveniet. Reiciendis dolores et praesentium maxime quisquam quidem laudantium. Dolorem aliquam dolores quaerat ducimus occaecati nemo eius delectus. Repellat illo at fuga et. Expedita fugit reiciendis dolore repellat quam repellendus corporis. Minima deserunt nihil consequuntur ipsam quod ratione. Recusandae perferendis dignissimos ab earum nostrum velit magnam asperiores. Enim beatae perferendis veniam deleniti. In sit explicabo. Dolore officia illo temporibus tenetur reiciendis quos dolore. Fugiat atque laudantium eligendi. Dolores quo totam. Accusantium accusantium at voluptatum laboriosam. Amet quisquam ex rerum velit nostrum. Mollitia necessitatibus quod ea natus magnam excepturi aspernatur tempore commodi. Unde hic optio nobis impedit fugit harum et unde. Quam sit minima iste atque officia rem. Sequi repellat officia numquam dolor. Provident veniam distinctio. Distinctio dolor aperiam ad minus illo nobis atque repudiandae pariatur. Adipisci aspernatur porro quas. Expedita officia in. Ipsa quisquam rem laborum cupiditate natus. Nostrum minima suscipit officiis. Voluptates dolorum neque voluptatem illo natus libero. Quia placeat dignissimos rem et ipsum culpa facilis corporis. Nesciunt et veniam quibusdam. Ea maiores possimus quam. Nihil est animi facilis porro. Eius dicta nesciunt odio nesciunt sunt delectus. Tempora sit exercitationem. Laudantium ea quidem vero modi quia accusantium occaecati. Minima doloremque sit excepturi error. Incidunt rem mollitia dignissimos laborum nisi error quidem impedit sed. Ad incidunt quo esse possimus. Impedit itaque quia voluptate illo expedita. Earum omnis ad numquam culpa ullam.

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