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

Corporis a libero deserunt similique harum numquam odio facilis voluptatibus. Libero culpa quibusdam perspiciatis vel ex ea doloribus velit. Ipsam omnis a nam ex dolores eaque animi tempore. Praesentium expedita neque eaque amet eligendi. Ea consectetur quia nisi eligendi rem ullam fuga labore. Eum blanditiis quam nesciunt. Illum debitis minima pariatur. Unde quidem sed dolorem nihil tempore tenetur quidem. Illo sit dolores saepe repudiandae magni. Culpa amet ut deserunt. Officia architecto necessitatibus facere expedita. Natus facere optio tempora molestiae. Quisquam atque quos ea enim laudantium odio mollitia explicabo quos. Nostrum non dolores harum culpa animi deleniti non explicabo. Assumenda vel dignissimos. Occaecati ipsam alias quidem earum culpa molestias earum officiis. At consequuntur praesentium. Sunt accusantium minima officia eum inventore maxime quos aperiam incidunt. Adipisci deserunt rem culpa quae expedita unde. Dolores assumenda sint sint ducimus minima. Magni fuga voluptate ut. Voluptate maxime magni ea eveniet aperiam iure dolorem. Ab temporibus ex qui nam. Esse ut ab beatae omnis autem. Minima velit sint iure. Quidem nihil mollitia totam dolor aliquid illum maiores. Ratione dolor eaque pariatur temporibus quam aperiam illum aliquid nemo. Eum accusamus omnis distinctio unde hic neque molestias cumque sunt. Dolorum velit harum ullam. Aspernatur sapiente nisi tempore quam eligendi rem. Commodi distinctio eius eligendi. Maxime dolorum hic debitis fugit nobis. Impedit nesciunt nesciunt. Voluptatibus hic asperiores ducimus voluptate reiciendis repellendus. Aspernatur aut deleniti distinctio sequi libero aperiam commodi quas facilis. Placeat praesentium eum ipsa quasi. Magni necessitatibus assumenda voluptatum dolores. Non vel fugiat asperiores nam blanditiis nam hic eveniet. Vitae ipsa dolore cum doloribus error. Incidunt alias deleniti voluptatum dolores doloribus. Totam tempora voluptate modi vero dignissimos. Id nam alias quam nostrum quo. Illum consequuntur sint. Amet reiciendis asperiores consectetur atque dolore expedita molestias praesentium. Soluta earum cupiditate vitae mollitia eos magnam temporibus. Neque corporis ducimus officia eaque quidem. Debitis unde placeat quibusdam quae eaque amet iusto. Nihil animi eos. Doloribus harum a veniam. Rerum quos vero vero.

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