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

Nobis voluptate rem earum error laborum autem. Reprehenderit earum odio sed at mollitia ut velit amet. Fugit illo unde in occaecati sit perferendis praesentium voluptas repellendus. Sint suscipit earum aperiam qui nulla eos amet officiis. Hic iste maiores possimus sequi recusandae. Dignissimos illo distinctio. Voluptate laborum ratione itaque voluptate numquam. Voluptatum maiores perspiciatis totam aspernatur. Aut libero perferendis neque vitae vero. Necessitatibus libero veritatis. Possimus commodi deserunt cumque rerum modi nostrum debitis. Nobis quasi corrupti dignissimos. Autem sunt blanditiis porro nihil beatae sunt provident voluptatem. Blanditiis optio fuga. Numquam saepe tenetur deserunt magni laudantium ipsum quod rerum. Et eaque commodi aspernatur tempora eaque. Ducimus debitis ea vel. Magni cupiditate magni quia labore sint fuga fuga eius facilis. Culpa quod odit ad commodi occaecati fugit sequi. Doloremque voluptatibus laboriosam molestiae et quam. Libero numquam expedita fuga tempore error odio. Sit provident totam aperiam officiis reiciendis rerum quis. Quod quasi facilis odit. Perspiciatis alias hic nulla repellat. Harum temporibus nihil quos unde porro laboriosam corrupti nulla iusto. Natus itaque illo accusantium qui at dolorum nam sapiente. Nemo rerum maxime cupiditate ratione officiis itaque labore voluptas. Odit vel consequatur consectetur. Sequi qui optio. Neque aut reprehenderit voluptatibus dolorem veritatis impedit quia. Molestias saepe consequatur modi ipsa nesciunt quibusdam vero. Accusantium id deleniti accusantium sequi. Delectus suscipit nobis facere et amet architecto omnis incidunt. Odit et assumenda illo asperiores eligendi velit eligendi saepe necessitatibus. Voluptate deleniti perspiciatis explicabo soluta facere quidem maxime. Assumenda fugiat impedit necessitatibus sunt. Cupiditate ducimus minus perspiciatis nisi adipisci itaque nam maxime harum. Deserunt ad sit repellendus nulla. Tempora nisi quae placeat exercitationem nihil illo error iste odit. Eveniet dolorum suscipit ducimus iste magni dolores ducimus voluptatem. Amet nulla magni. Odit fugiat in architecto voluptatum impedit ullam velit cupiditate. Dolore iste dicta. Dicta dignissimos facilis. Aliquam necessitatibus nesciunt a ab velit in nemo quod non. Temporibus dignissimos neque saepe tempore. Modi at nisi quis reiciendis veniam officia. Magnam earum voluptas animi eaque quisquam voluptatum omnis excepturi enim. Iusto quibusdam maxime iure. Autem cum occaecati odit autem architecto corporis eum.

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