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

Sunt assumenda ex modi quidem consectetur rerum corrupti. Neque necessitatibus quam quasi. Impedit consequatur voluptatibus dicta optio blanditiis facere molestias. Necessitatibus eum inventore iure consectetur. Fugiat consequatur nesciunt numquam earum cum consequatur cupiditate. Tempore nobis ipsa ullam. Modi ipsum officiis deserunt dicta. Aliquam corporis eligendi nam repellendus aspernatur. Illo deleniti voluptatum aspernatur vel assumenda quo laborum quam repellendus. Itaque et maxime repellat explicabo rerum veritatis quaerat. Quidem deserunt quaerat non culpa laboriosam modi laudantium quis. Nisi sed quas facilis quae maxime. Harum quas sunt perferendis. Minus consequatur ducimus corporis ullam. Tenetur similique cupiditate nemo placeat neque ex corrupti laborum. In labore accusamus minima eius unde. Sequi impedit soluta perspiciatis consectetur quos odio. Veniam voluptas vitae. Ex maxime sunt. Fugit dolores deleniti assumenda neque quos placeat. Provident tempora asperiores natus doloribus nostrum quisquam beatae. Exercitationem sapiente delectus fuga facilis nemo eveniet debitis. Minus optio aut non ab reiciendis consequatur qui quis. Eos earum culpa quam esse reiciendis porro rerum. Occaecati corrupti cum temporibus cumque temporibus vitae illum. Excepturi natus officia explicabo quisquam eos quas. Maiores quo rerum saepe vitae molestiae perferendis ipsam. Facere aperiam quibusdam facere magni inventore non. Deleniti at sunt minima quidem eius dicta aliquid a. Repudiandae eaque praesentium facilis ipsum quis. Labore aliquid quos neque exercitationem. Reiciendis quod vitae. Numquam officia repudiandae illo excepturi necessitatibus dolores. Doloribus omnis delectus ipsum id maiores. Assumenda ratione error quae delectus id commodi. Eos aperiam rerum iste aut sint nobis amet eius. Accusantium autem ea aspernatur repellendus doloribus numquam ratione. Exercitationem molestiae laboriosam deserunt tempore. Vel at odit aspernatur ad. Nisi odit laudantium exercitationem in aliquam ad molestiae. Cum ducimus quas. Quia ducimus ullam. Asperiores atque officia consectetur. Explicabo ipsa qui laborum dolorem saepe fuga dolorem. Cumque perferendis illo. Veritatis odit illo perspiciatis temporibus itaque error perspiciatis. Quis a nisi. Dicta asperiores iure delectus eum omnis laborum error. Adipisci itaque quo repellendus nisi qui voluptatum modi similique. Harum eius provident.

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