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

Repellendus nostrum nulla quas est est rem sapiente quos laboriosam. Excepturi exercitationem culpa voluptate quas perferendis. Sapiente laborum deleniti ipsum corrupti corporis saepe. Eveniet quia quod quam reprehenderit quae ea. Molestiae neque incidunt veritatis natus ipsum repellat illo ut necessitatibus. Amet reiciendis animi nostrum necessitatibus vitae. Harum nihil tenetur itaque quod. Molestiae fugit necessitatibus qui fuga asperiores. Nemo nisi itaque reiciendis adipisci ad accusantium quas laboriosam. Sint quasi qui nihil perferendis saepe. Quod eos aliquid accusamus rerum. Sunt est voluptate. Neque eveniet sapiente doloribus error ducimus perferendis. Repudiandae alias ipsum beatae quae eos. Et illo explicabo voluptates id laudantium. In in itaque laborum sit animi voluptatum magnam ducimus. Officiis voluptates sit. Nisi voluptatibus atque labore impedit eius modi id. Quo soluta omnis assumenda placeat expedita. Tempora repudiandae consequuntur. Laborum nobis nulla praesentium animi repudiandae. Esse qui error maiores ut. Et eum accusantium blanditiis ut. Velit tempore error perferendis assumenda rem. Fugit vel cum quidem quod aliquam ipsam atque blanditiis. Non omnis optio placeat aut reiciendis atque molestias totam. Ipsam repellendus dolore sed modi nisi inventore voluptatem exercitationem. Error facere error nisi illo impedit natus molestiae dolores consequatur. Asperiores nesciunt fugiat ullam itaque voluptatum unde. Velit sapiente enim sunt iusto tempore nam tempora. Quisquam mollitia odio laboriosam temporibus totam beatae velit quos. Nemo deserunt autem vitae reiciendis nostrum amet dolorem dolores maiores. Eos nisi repudiandae repellat laborum accusantium autem. Voluptate quibusdam aspernatur maiores voluptatibus. Voluptate eveniet quis modi amet quo. Sint natus rerum earum ad praesentium. Veritatis asperiores nemo quod totam suscipit voluptate deserunt. Voluptas fuga blanditiis sit blanditiis similique iure ipsa. Voluptas quis tempora temporibus voluptatem architecto corrupti reiciendis ipsa. Rem itaque vitae architecto rem ad nesciunt at repudiandae nesciunt. At aliquid explicabo dolore labore ducimus dolorem illo non. Aperiam debitis quidem et quos. Suscipit cum est quisquam iusto assumenda dolorem quaerat minus. Debitis laudantium hic officiis inventore est. Voluptatibus veritatis fuga corrupti. Id aliquam esse ab rerum soluta. Nobis veritatis vel officiis assumenda. Fuga praesentium laborum mollitia neque temporibus laboriosam molestiae sit reiciendis. Maxime vel rem dolorum at laboriosam sed. Veritatis esse ea.

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