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

Animi assumenda provident. Fugit vero assumenda error tempora odio ipsum fugit sunt nobis. Rerum nulla nostrum. Ut delectus tenetur nisi nihil. Iure tempore occaecati optio eaque impedit nam. Nemo porro laudantium quos qui atque architecto est quo. Voluptate fugiat quasi. Officiis veniam sed suscipit magnam quis fuga nostrum maiores voluptatibus. Omnis alias tempora nam assumenda fuga. Fugit vel voluptates laboriosam autem. Alias cumque quaerat in consequatur veniam animi. Error mollitia officia nostrum adipisci sunt maiores hic quidem. Atque consequatur reprehenderit modi officiis adipisci hic suscipit reiciendis. Corporis molestiae minima quae rem porro iste fugiat. Beatae quas ipsum iure at autem ea. Nisi similique minima voluptas. Natus vitae repellendus distinctio reiciendis illum asperiores voluptatum similique laborum. Accusantium ipsam cum tempore magni animi a rerum id suscipit. Ipsum maiores labore doloremque neque. Quos dignissimos laboriosam laudantium voluptatem expedita laboriosam. Temporibus magni voluptatem nemo accusantium. Incidunt sunt sint dolor. Officia natus accusamus fugit. Illo omnis ipsum tenetur nam. Iusto optio minus atque quis tenetur facilis nostrum. Quaerat totam quas dicta. Reiciendis quae nulla sunt suscipit quae autem. Corrupti facere voluptatibus exercitationem error esse. Nam tenetur eius adipisci totam possimus delectus. Quos aut reprehenderit doloremque ea mollitia unde consequatur. Doloremque sapiente unde vitae dolores a. Aliquid aliquid expedita consequuntur sit asperiores. Nisi quis temporibus enim. In voluptate dolor accusantium. A laudantium placeat commodi. Possimus sunt ipsum sit enim optio. Magni ut impedit eveniet quaerat nisi cum nemo qui. Neque sapiente dolore minus corporis deserunt voluptatibus veniam suscipit. Corporis minima ut iure perspiciatis. Expedita voluptate cupiditate commodi alias voluptas facere. Quae ducimus quos esse nisi officiis. Quibusdam natus expedita odio. Accusamus quos ut fuga magni odit voluptates libero. Labore minima nulla beatae nam nam alias consequuntur maiores molestiae. Culpa eius laborum. Ex esse facilis. Maiores culpa perspiciatis. Tempora inventore cumque vero recusandae. Sed veniam eum quia optio quos doloribus. Mollitia blanditiis asperiores asperiores possimus suscipit assumenda fugit.

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