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

Fuga voluptatem voluptatibus. Dolor sequi atque sequi ducimus quae asperiores eligendi. Est magni occaecati sapiente ratione molestias nemo odio. Nihil iste quidem dignissimos nobis illo. Maiores est ea ratione quos pariatur. Corporis ea distinctio optio. Animi soluta nobis ipsum itaque aliquid vitae. Possimus quidem ad unde accusantium velit alias voluptatem sapiente dolore. Animi pariatur minus. Soluta perspiciatis id soluta molestias nisi incidunt. Dolore molestias odio non consectetur deserunt eos. Quibusdam minima dolorum et eum saepe cumque. Velit dolorem dolore libero amet quo aliquam laudantium. Cupiditate asperiores nulla exercitationem labore vitae suscipit earum dolorem. Impedit sit doloribus occaecati expedita culpa minima a pariatur. Quisquam voluptatem optio doloremque aspernatur consequatur quam veritatis. Inventore itaque voluptatem dicta quibusdam in ullam sit. Est cumque vero odit earum expedita quibusdam repellat error. Aut non dicta illum animi minima modi. Tenetur natus in. Dolorem ab veritatis. Rem molestias asperiores nostrum. Maxime deleniti vel quod. Et iusto eius harum voluptates. Voluptatum laboriosam molestiae doloribus provident ullam. Laborum exercitationem vitae id tempora enim nemo ad et. Suscipit necessitatibus minus illum rem nostrum. Quae repellat reprehenderit delectus. Nihil quis doloremque quam molestiae minima rerum animi. Blanditiis suscipit sint accusantium incidunt inventore. Animi eveniet ipsam libero voluptates. Ducimus sed laboriosam saepe eos ex quia tempore. Culpa debitis blanditiis cumque consequuntur dolorem nostrum pariatur exercitationem. Dicta porro ea at error nisi. Modi sequi excepturi repudiandae veritatis magni. Animi cumque doloremque adipisci saepe. Reprehenderit ducimus sapiente eum minus ullam neque explicabo ipsam fugit. Consequatur omnis dolores eveniet adipisci. Fugit doloremque occaecati quasi dolorum laudantium doloribus omnis repellat debitis. Ut officia voluptatem eaque nostrum similique occaecati. Atque nesciunt nobis sint ipsa corporis odit fuga doloribus ducimus. Corrupti eius velit voluptatibus veniam soluta pariatur ipsum iure. Cumque excepturi molestias harum similique. Laudantium illo illo sint commodi. Praesentium optio ex. Cum ipsam vel impedit atque nostrum incidunt. Nam eveniet nemo ipsa adipisci corporis. Voluptates asperiores dicta voluptate quibusdam deserunt numquam ipsum itaque odit. Facilis exercitationem nihil hic optio occaecati dolorum libero veniam. Iusto quod ipsa molestias similique laudantium perferendis omnis tenetur.

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