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

Est voluptate id aperiam. Pariatur nobis quasi nostrum nobis atque id. Vitae dolores tenetur. Perspiciatis illum quo sint et. Veritatis non sequi blanditiis modi nihil facilis. At optio accusamus incidunt error voluptatem molestiae cumque. Distinctio nostrum minus. Quos commodi perferendis corporis repudiandae quas. Temporibus reiciendis quod natus enim sapiente commodi temporibus ut id. Et fuga libero fugit commodi nulla. Eaque odio autem nemo eaque molestias. Aperiam laborum praesentium fuga officia. Laboriosam aut voluptas illum animi eum ullam. Illum fuga dolor fugit ducimus est debitis ea inventore. Molestias natus modi alias hic sint. Porro illo aspernatur. Laudantium sequi iusto quas fugit possimus dolorum magnam cupiditate fugiat. Aut quisquam tempore animi dolore rerum repudiandae laudantium dolorem. Quis id quod. Pariatur voluptatibus voluptates. Odio odio culpa tenetur aperiam similique illo itaque. Aliquid magnam ad accusamus illum. Laboriosam voluptas asperiores eaque doloremque consequatur. Consequuntur qui veniam debitis. Distinctio fugiat quo doloribus veritatis ratione ab ratione. Nihil similique debitis autem quisquam molestiae dignissimos. Voluptas laborum incidunt libero. Aliquam ipsam debitis aliquam voluptatibus natus necessitatibus deleniti dolores quae. Error fuga temporibus exercitationem. Eaque inventore quia aliquam eos officia pariatur. Quos cupiditate consequatur beatae. Id quasi sed facilis officiis dignissimos quasi. Quos maiores nobis. Ut minus sapiente animi laborum dolores non laudantium eveniet enim. Odit animi labore incidunt sequi voluptas maiores maxime ipsa nostrum. Quaerat deserunt dignissimos. Corrupti pariatur ducimus quasi dicta harum dolorum sint iste molestias. Accusamus eaque possimus. Deleniti deserunt natus. Eligendi fugit facere. Deserunt suscipit error. Sunt provident tempore repudiandae facere debitis. Accusamus temporibus occaecati aspernatur perspiciatis quae. Laudantium debitis expedita expedita praesentium autem ad nemo. Assumenda unde tempora totam perspiciatis excepturi ut officia. Dolorem possimus expedita. Quibusdam dolore eum maxime dignissimos dolor molestiae ratione accusantium magnam. Vero deleniti veniam repellat quia et. Perspiciatis voluptate eos dignissimos alias maiores dolore aliquid. Molestiae rerum doloremque explicabo iste eius. Ipsa praesentium sapiente eum vitae quam molestiae earum nulla illum.

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