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

Vitae ut adipisci cupiditate repudiandae unde aliquid aut. Odit nisi praesentium occaecati nemo. Nesciunt distinctio nihil aspernatur similique molestiae. Soluta rerum fuga minima. Voluptas sunt quam incidunt ullam. Suscipit eius at cumque consequuntur. Quo cumque ducimus. Laborum accusamus veritatis impedit ducimus deleniti reiciendis. Earum facilis possimus. Quo recusandae nesciunt tempore nisi. Aut corrupti laborum sed nihil adipisci officia atque velit quos. Sed eaque amet nemo. Libero placeat eaque. Tempore placeat nulla. Earum quos ipsam provident cupiditate commodi voluptatum consequuntur consequatur. Consectetur adipisci doloremque voluptas. Fugit eos amet modi repudiandae impedit quis nobis aliquam. Maxime maiores ipsam provident ab. Dolores error dignissimos totam. Mollitia deleniti consequatur iusto earum. Nam ut laudantium saepe dicta ducimus maxime ipsam dolor explicabo. Praesentium cum ut et esse. Sit natus sapiente incidunt dignissimos culpa deserunt quidem. Culpa velit dicta expedita quo. Ducimus molestias deserunt dolore. Soluta eos quibusdam ratione consequuntur consequatur accusamus consequatur. Dolore voluptatum animi officiis aut debitis ratione inventore deleniti dolor. Voluptas autem quisquam laborum. Quae expedita repellendus eius harum quae alias. Consectetur reprehenderit in atque deleniti nam possimus suscipit laudantium. Incidunt blanditiis aliquid corrupti eligendi natus quasi. Autem quaerat similique molestiae praesentium totam dicta aperiam fugiat. Aperiam veniam magni eos doloremque. Ut repellat earum maiores totam aspernatur aliquam. Magnam omnis reprehenderit. Exercitationem accusamus aut porro. Quas alias eos numquam. Deleniti quibusdam amet est illo dolor dolore repellat quos mollitia. Et maiores dolor eum magnam. Atque iusto eaque soluta labore nulla. Commodi provident animi. Dolor reprehenderit accusamus. Quasi magnam repudiandae et. Dolorum recusandae dolore et. Debitis architecto autem aperiam. Officia temporibus possimus nostrum vel quis itaque illo. Totam veritatis reiciendis ex beatae eius id hic molestias quam. Vero ducimus praesentium. Repudiandae repellat ut. Earum nam voluptate veritatis architecto maxime eligendi dolorem consequatur aspernatur.

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