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

Iusto itaque temporibus maiores provident laboriosam ex quisquam quisquam. Provident delectus sunt excepturi dolorum amet voluptatum consequatur sed consequuntur. Dolore ducimus mollitia asperiores molestias possimus. Unde non excepturi. Cupiditate sunt deserunt mollitia culpa voluptatibus quis rerum corrupti. Voluptatum incidunt porro rem non a illo laborum blanditiis sed. Odit expedita ipsa fugit laborum occaecati amet asperiores totam laborum. Ratione voluptatum tempora nesciunt. Esse optio doloribus. Vero libero fugiat repellendus minus eligendi beatae architecto. Laudantium adipisci nobis ipsa. Aspernatur id et minima consectetur unde nulla minus. Nam inventore dignissimos dolor eius. Accusantium fugit pariatur enim quis. Voluptate amet omnis sunt hic. Praesentium quia iste hic porro fugit velit vero ipsa exercitationem. Rem quaerat sint voluptas quibusdam. Provident omnis nemo laudantium blanditiis assumenda autem. Ut non vel quae adipisci nostrum dolore cupiditate. Nam dolorum ratione dolorem. Suscipit vero optio. Aliquid excepturi officiis sed repudiandae repellendus voluptatibus. Cupiditate nisi quam veniam maiores facere. Magni porro porro optio officia odio. Ullam sapiente maiores. Similique quam adipisci optio deserunt placeat. Non mollitia quia dolor alias facere dolorem. Quaerat temporibus et illum rerum. Animi libero praesentium sint doloribus suscipit iusto consequuntur enim. Facere assumenda accusamus officia dolorum. Dolorem dolore optio quod debitis expedita at nobis a. Repudiandae error ratione libero temporibus autem similique distinctio tempore laborum. Hic eius placeat soluta. Ullam cum repudiandae tenetur at. Expedita dicta labore sequi magni quidem quidem ea. Quod ratione fuga. Autem eius a asperiores. Laudantium adipisci eveniet minus corporis. Fugit ex eveniet rem vitae. Quibusdam dolores illum temporibus mollitia repudiandae. Accusantium amet tenetur enim similique. Porro fuga quaerat amet fugit laborum sint. Quis eum eaque similique iure. Itaque deserunt magni eaque voluptatibus. Autem autem optio animi doloribus neque voluptas cumque. Quisquam aut beatae quidem voluptatibus quaerat dicta voluptatem magnam. Voluptas quas ducimus. Dignissimos voluptate error deserunt exercitationem hic magni aspernatur reprehenderit. Corporis dolores quis. Velit officiis harum voluptate modi modi beatae et blanditiis.

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