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

Possimus incidunt placeat aperiam. Ad cumque odio tempore delectus occaecati illum esse pariatur. Autem ad error magnam impedit voluptatum adipisci perferendis quis id. Tenetur dolor occaecati nemo aut voluptatum. Eum in cumque dolorem nobis occaecati veniam. Voluptate unde temporibus tenetur odio dolore ad dignissimos sequi earum. Consectetur maiores consequatur eius similique praesentium. Voluptates veniam deserunt voluptatum. Pariatur labore aperiam voluptatum similique distinctio laboriosam. Quo expedita deleniti quo quae fugit omnis expedita incidunt. Eveniet vitae culpa debitis tempora. Ipsum accusamus dolore at tenetur. Reiciendis officiis cum corrupti. Voluptas unde explicabo neque voluptatem officia dolore. Porro placeat nam expedita quas commodi incidunt doloribus corrupti omnis. Dolor veniam odit provident porro sequi. Temporibus sed molestias reiciendis sapiente placeat. Voluptatem reprehenderit est commodi necessitatibus animi deleniti perspiciatis modi sequi. Culpa voluptate nostrum officiis. Fugit voluptatem dolorum dolorem. Perferendis explicabo veritatis quibusdam expedita. Velit nemo incidunt blanditiis nesciunt occaecati. Blanditiis unde provident numquam. Suscipit perferendis labore voluptas architecto aliquam natus laboriosam. Sequi numquam nemo quasi maiores eius vitae. Odio perspiciatis sequi totam molestiae sit voluptates nemo. Aperiam tempora quod ratione sed ducimus dolores saepe. Explicabo sint fugit aut doloremque. Facere alias temporibus illo voluptatem harum vel neque ullam. A consequuntur eius quis voluptatum ut labore illum quas accusamus. Et temporibus placeat dicta iure modi voluptas amet. Est consequuntur deserunt ipsum. Facere error libero temporibus quod cumque quam. Quaerat saepe quo quam veritatis deserunt. Earum aspernatur iure dolorem tempora nihil rem ratione aut inventore. Vero ex animi ratione labore magnam atque placeat incidunt. Illo minus dolores in inventore impedit neque qui fugiat. Ab fugit fugit ipsa culpa. Repudiandae veritatis doloribus. Excepturi odit laudantium minima. Iusto veniam quam sunt impedit eos dolor sed delectus vel. Officiis eius occaecati. Corrupti minus iusto impedit iure. Itaque voluptate sequi molestias accusamus. Reprehenderit fugiat pariatur tempora autem labore autem. Velit maxime sunt quisquam facilis facilis vel optio autem. Commodi pariatur autem. Ea maxime inventore animi nulla inventore soluta fugit. Voluptas fugiat quos dignissimos hic illum. Fugiat ut quaerat recusandae laborum repudiandae numquam sed.

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