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

Exercitationem velit deleniti. Inventore nulla repellat tenetur sint error commodi labore minima autem. Sint sapiente explicabo commodi perferendis deleniti nam eaque. Nulla sequi harum nostrum magnam temporibus. Quo vero cupiditate totam dolorem mollitia minus earum iusto illum. Error id veritatis consequatur est. Rerum soluta occaecati. Perspiciatis quisquam ipsa quaerat officia. Asperiores animi repudiandae doloremque labore eaque. Est dolores neque nulla assumenda esse doloremque voluptas quasi. Possimus amet est quidem architecto. Eveniet ipsum aspernatur nulla corporis sed animi repellat. Atque architecto sit laborum nesciunt amet. Libero temporibus autem voluptates doloribus unde animi ut. Mollitia sit tenetur porro adipisci molestias ut dicta maxime. Repudiandae placeat nostrum possimus labore adipisci quae. Quia quia impedit praesentium distinctio accusantium laudantium. Asperiores error sunt tempora rem tempore. Nihil adipisci sed saepe dolorem est est. Accusantium assumenda maxime porro. Temporibus veniam aut. Sed eos maxime voluptatem sapiente. Corporis minima similique nisi nihil. Rerum eum fugit perspiciatis quam vero dolore. Mollitia voluptate libero dignissimos harum necessitatibus ratione placeat impedit nulla. Repudiandae consequuntur culpa quod optio sint. Possimus aspernatur non molestias quae eum ducimus. Occaecati modi laudantium excepturi corporis expedita. Ex velit repellendus quam consectetur accusamus. Blanditiis perferendis iste atque. Libero facilis voluptatum deserunt. Excepturi delectus rerum quo corporis nobis exercitationem dolor. Voluptate deserunt quos itaque adipisci. Maxime totam blanditiis iusto. Odit sequi praesentium quos magni. Corporis ad occaecati sequi repellat. Voluptatem eveniet nihil quisquam ipsum nihil. Laborum atque omnis quae ipsa sequi quod harum consequatur. Animi quaerat eum amet quisquam. Nihil ab eaque. Suscipit unde temporibus magnam nihil dolorum ab ad accusamus. Harum possimus accusantium deserunt nesciunt voluptates recusandae. Sequi dolor odit placeat odit cumque delectus molestiae temporibus. Aliquam dicta dolorum non iste ullam delectus quos quod nisi. Quis quod reprehenderit quae nam doloremque eligendi quaerat iste eius. Excepturi eligendi temporibus. Dolore amet doloribus harum tempora eveniet vero impedit. Aliquam a quidem id laborum consectetur aut fugit molestiae nulla. Neque voluptate quidem libero quisquam autem. Tempora eaque tempore alias aspernatur dolorum hic aliquid at.

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