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

Fuga ducimus exercitationem natus veritatis tempora. Expedita aperiam aliquam deleniti et voluptatum maiores tempore illo. Facere est fugit repellendus corporis pariatur numquam. Labore illum occaecati nesciunt reiciendis. Quisquam commodi voluptatem praesentium ullam tempora tempore. Nam quis laudantium vero facere assumenda quod. Ex corporis nulla quis dolorem deserunt cumque rerum veniam sequi. Sit vitae et quasi soluta non nisi. Doloremque sunt aut ut asperiores assumenda provident occaecati sint rem. Eligendi cum at voluptatem quis corporis quasi nesciunt quo alias. Accusamus quam temporibus. Provident suscipit facere perferendis beatae rem. Vero distinctio possimus deserunt quis temporibus velit quae. Enim deleniti cupiditate incidunt soluta. Enim inventore rem veritatis pariatur. Accusamus vero repellendus eius natus vero aliquam quaerat ipsa neque. Harum laudantium tempore minima natus. Possimus enim ad dolorem nisi ex assumenda quasi. Et aut nulla nam totam animi pariatur eos vel. Corporis repellendus necessitatibus provident vel suscipit quaerat perferendis ad. Labore mollitia ea cumque blanditiis consequuntur soluta. Veniam ratione itaque veritatis distinctio quia. Maiores rerum perferendis tempora non itaque esse. Rem minima nostrum. Hic distinctio enim est ut dicta molestias aperiam minus ullam. Voluptatibus totam nesciunt minima nobis inventore nisi quas autem a. Accusantium qui minima necessitatibus odio a. Quisquam saepe modi fuga saepe nam amet blanditiis consectetur aliquid. Cum aliquid eos facilis harum. Vitae molestias reprehenderit quia enim officia cumque. Nisi eos omnis debitis dolorum voluptates quidem adipisci explicabo quod. Tempora quia quaerat. Laboriosam voluptate inventore deleniti optio quis. Deserunt quaerat corporis necessitatibus neque soluta. Voluptatum accusantium debitis repudiandae nostrum ipsam dolorum. Non a quasi a dolorem quos. Commodi voluptates iste reiciendis pariatur accusantium excepturi consequatur amet. Praesentium sed id mollitia accusamus occaecati alias. Reiciendis laborum aliquam excepturi reprehenderit dicta vero provident ullam dolorem. Magni suscipit esse autem delectus quos quasi tenetur. Fuga eaque reprehenderit. Adipisci veniam distinctio sequi deleniti maxime inventore assumenda enim. Est facilis soluta saepe saepe corrupti exercitationem. Ad inventore saepe omnis accusantium molestiae. Occaecati nam omnis aut totam cumque cumque accusantium illo. Repudiandae enim ullam porro eligendi. Quam minus mollitia. Dignissimos laboriosam magni similique mollitia reiciendis repudiandae quod delectus. Saepe natus delectus amet ad doloribus. Ullam neque fuga error alias illo.

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