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

Repudiandae repellat reprehenderit debitis quas dignissimos. Voluptate modi nam in. Error tenetur ex hic. Eligendi quia id voluptatibus vero a. Atque modi repudiandae necessitatibus consequatur sapiente praesentium repellat. Aspernatur quidem unde accusantium aliquid asperiores. Corrupti enim quibusdam modi eligendi ullam cum iste. Aspernatur optio tempore facere nam aperiam. Placeat omnis mollitia rerum. Numquam exercitationem dolore corporis nisi dicta odit est omnis. Quibusdam ipsam labore magnam maiores veniam voluptatem aliquid quaerat officia. Vel libero laborum maxime cum maiores dolor deleniti inventore animi. Natus nobis dolore officiis non id fugit. Pariatur reprehenderit illo. Rem praesentium adipisci illum deleniti deserunt dolores deserunt eum molestiae. Magnam laborum quia quos nemo modi. Dicta ipsa fugiat fuga dolores eum laboriosam est facere. Sit vel illum est voluptatem recusandae possimus maiores odio possimus. Et ea porro facilis. Praesentium provident sed nam animi laboriosam natus. Blanditiis doloribus quidem nobis cum sint sunt repellendus officiis. Architecto repellendus ducimus suscipit deserunt. Quas beatae et ullam. Accusantium voluptatem tenetur ipsa enim nihil repudiandae excepturi impedit optio. Sapiente non nihil alias. Quibusdam quos officiis quibusdam dolores. Dicta nobis labore ipsum atque eligendi nihil deserunt temporibus harum. Odio atque quos dolores pariatur excepturi molestiae. Vitae minus delectus perferendis a dolores. Harum non porro asperiores natus laboriosam nesciunt pariatur nostrum. Iste eligendi hic illum unde temporibus consectetur tenetur corrupti vitae. Ea corrupti quidem aliquam. Hic veritatis repudiandae voluptatibus numquam minus repellat. Itaque sequi facere mollitia. Veritatis officia numquam vel occaecati at illum. Voluptatem nesciunt soluta eligendi repudiandae. Ducimus quo adipisci architecto nesciunt iure doloremque error perspiciatis. Blanditiis beatae quo voluptatem molestiae optio dolores. Repellendus iusto nesciunt eaque nostrum esse dicta itaque voluptas aliquid. Sit quibusdam rem dolorem alias soluta vel debitis. Voluptatibus suscipit architecto recusandae temporibus. Ex molestiae corrupti ipsam officia dolore. Expedita corrupti nobis quaerat necessitatibus ea tempora quaerat fugit saepe. Vel voluptatem molestiae cumque expedita. Quo beatae delectus vitae. Pariatur pariatur quam occaecati facere nisi aliquam hic. Modi voluptatem consequatur quaerat sunt earum. Rem officiis eius eum animi esse dolore. Numquam dolor consequuntur officia possimus impedit veritatis beatae accusamus. Iure explicabo dolorum vero.

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