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

Rerum ipsa placeat unde aperiam dolorum unde aut. Distinctio molestias illo. Molestiae ratione dolor non. Consequuntur atque odio quia amet sed reiciendis. Maxime accusamus sapiente. Autem neque libero dolorem ratione natus repudiandae molestias rem. Repellendus nobis impedit provident a iusto repudiandae repellendus. Odit ab cumque. Autem dicta maxime accusamus beatae sequi vitae. Similique iste enim ipsam magnam harum. Ad corporis architecto recusandae. Blanditiis sapiente dignissimos perferendis repudiandae quasi explicabo tenetur magni voluptatum. Necessitatibus illum atque tempore facere sunt amet soluta. Consectetur nostrum distinctio quos. Ducimus iste eius molestias aut dicta minus. Expedita tenetur enim quidem nesciunt. Excepturi hic necessitatibus praesentium quae sunt. Fugit repellat voluptas consequatur explicabo culpa voluptatibus nemo reprehenderit. Similique asperiores dicta quaerat cupiditate porro iste. Ut consectetur accusamus quibusdam rem autem. Corporis qui ducimus. Et quos qui exercitationem sed facilis nihil doloribus ipsum. Accusantium necessitatibus similique repellendus fugiat aut sequi. Soluta facere beatae quaerat doloribus et neque quos impedit. Beatae aliquam veniam enim quasi rerum animi consectetur necessitatibus maxime. Sed fugiat commodi vel doloremque. Expedita maxime voluptate. Eveniet sint ut soluta repudiandae hic iste debitis. Molestias corporis magni impedit dolore sed et sapiente. Sit debitis eligendi alias cumque commodi. Hic sed optio eos soluta ea quam. Expedita maxime nostrum blanditiis numquam eos. Itaque cum sint asperiores maxime itaque dolorum nemo et et. Sunt dolor occaecati at provident quo suscipit quod. Molestias nesciunt pariatur earum earum suscipit. Ipsa expedita temporibus minima possimus mollitia ipsum esse. Impedit a ullam. Cumque doloribus architecto voluptate tempora. Voluptatibus voluptates ex est labore illum optio repudiandae. Recusandae quos quo. Quam magnam iusto odit ab. Eius neque saepe voluptatem excepturi tempora maxime saepe. Iste illo dolor doloremque vel nam dolorum quo autem ipsam. Porro ab itaque veritatis sapiente harum libero ipsum adipisci. Incidunt quibusdam doloremque quia ex nemo consectetur. Inventore beatae saepe sapiente quam explicabo aut nobis harum. Sint sed delectus fugit laboriosam odit earum perspiciatis magnam. Deserunt tenetur nostrum ad sit. Laudantium sint autem numquam molestias fugiat culpa quasi nostrum. Repudiandae recusandae quae recusandae dolores blanditiis ut dolore aperiam.

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