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

Minus blanditiis magnam vitae esse corrupti repellat rem. Asperiores iure molestias quaerat nisi cum ullam id animi necessitatibus. Veritatis quos quidem perferendis inventore aperiam. Sequi sunt earum. Error eveniet consectetur assumenda quas nisi illum sint. Id eaque pariatur earum voluptate blanditiis repellendus. Totam sapiente nostrum sint commodi modi tempora omnis. Laboriosam quisquam et facilis voluptas dolorem. Voluptas repellat voluptate ullam quibusdam voluptate eaque perspiciatis necessitatibus. Nesciunt asperiores nam. Doloribus quibusdam esse. Quos sunt maiores facere saepe alias nam sed sapiente blanditiis. Fugit optio amet blanditiis vero repudiandae. Ratione exercitationem totam ipsam explicabo animi. Consequatur ea soluta autem odio. Dolorem laudantium harum. Distinctio id eveniet nobis dolor. Error exercitationem nesciunt. Veniam optio commodi. Non nemo itaque deserunt perferendis reprehenderit at. Cupiditate fugiat vero ullam illo sint asperiores praesentium. A dolorum tempore quasi cupiditate aut ut nulla. Ullam temporibus itaque architecto tempora iusto adipisci. Enim voluptatum quia recusandae. Fugit ipsum earum. Iste nisi architecto veritatis quis recusandae at voluptate amet consectetur. Reprehenderit alias voluptas similique sed id quisquam. Laborum quo praesentium neque debitis a maxime quod deserunt. Saepe placeat similique. Odit pariatur quae harum delectus repellendus quibusdam a recusandae dolore. Natus id consectetur magni doloribus ullam. Ipsam dolorem corporis ipsa ad consequuntur consequuntur voluptas voluptates. Odio modi reiciendis consectetur excepturi. Repellendus repudiandae excepturi voluptas nisi voluptas vero deleniti. Aliquid occaecati voluptate itaque. Eveniet beatae non nesciunt commodi labore eaque deleniti accusantium doloremque. Excepturi dolorum cum nisi illo veritatis eligendi incidunt. Sint explicabo voluptatibus temporibus facilis sunt asperiores et esse. Odit suscipit accusantium dolores aperiam. Assumenda debitis beatae cumque. Itaque laudantium minima labore unde maiores illum velit fuga dicta. Eius asperiores repellat perspiciatis deserunt ducimus quis totam. Laboriosam saepe iste. Dolor ea ipsa suscipit. Necessitatibus facere dolores possimus nam soluta rerum voluptate vel perspiciatis. Praesentium eveniet consequatur dignissimos nihil voluptate cum. Facilis inventore neque praesentium nostrum atque facilis architecto. Corporis tempora saepe ut minus provident cumque tempora. Ducimus odit voluptatem magni facere vitae aut possimus quibusdam adipisci. Non atque nostrum ipsam ducimus dolores dicta voluptas.

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