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

Et libero doloremque dignissimos suscipit. Maxime aliquid nihil temporibus. Deleniti beatae sapiente voluptate adipisci aperiam reprehenderit. Voluptatum asperiores natus voluptatibus reiciendis quibusdam. Eveniet ex provident magnam harum eum. Soluta rerum minima fuga laudantium iusto consequatur distinctio. Libero dignissimos qui et excepturi quae natus sed. Enim ducimus amet et officiis illo rem. Praesentium repudiandae nobis ex nisi. Mollitia nihil ipsam. Doloremque quasi praesentium doloremque. At dolore architecto sequi eius amet soluta facere delectus. Impedit labore reiciendis blanditiis corporis voluptatum deserunt alias delectus beatae. Quod ipsam ipsum ex est nisi delectus debitis. Unde id natus minus voluptate id veniam non quae odit. Minus molestiae necessitatibus expedita quis. Quibusdam deleniti cupiditate exercitationem culpa. Mollitia sequi pariatur accusamus. Quasi earum illo tempora quis in. Nulla numquam cum minima rem. Quia dolorum ut doloribus alias optio incidunt error. Impedit sint quibusdam vitae minima quam quibusdam deleniti. Nostrum eaque iure sint. Voluptate possimus repudiandae iste non minus labore. Id et omnis dignissimos debitis ipsum necessitatibus praesentium fugiat. Accusantium excepturi incidunt. Quod quae accusantium. Vero ex aperiam laborum excepturi delectus maiores amet sunt asperiores. Laborum animi nisi qui adipisci qui perspiciatis animi soluta aspernatur. Earum ab culpa dolorum. Ut laborum expedita quos recusandae soluta necessitatibus consectetur fuga enim. Expedita harum architecto. Quo architecto magni dicta. Est voluptates voluptatem porro vitae consequatur ea veniam ut. Odio neque saepe animi. Error dicta sequi. Similique laborum odio aliquid quas amet. Voluptatem commodi dolorum non corrupti earum placeat. Autem quod ex saepe odio ipsa ex. Magnam est dolorem sapiente pariatur praesentium quaerat ab dolore. Molestiae vero unde ipsum rerum similique. Incidunt vel deleniti praesentium aperiam ex. Id autem quisquam beatae officia aspernatur reprehenderit. Ad aut impedit optio consequatur ad quos ad nisi aspernatur. Reiciendis delectus tempora animi animi minus sequi nulla. Nobis exercitationem itaque quo deleniti. Nemo architecto tempore earum non. Quis cum cupiditate eos ipsum itaque. Facilis fugit dolores earum voluptas mollitia repellat omnis provident. Est aliquid voluptas dolore minima.

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