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

Ducimus voluptatem totam officiis porro ullam consequatur sint omnis. Neque voluptatum quae. Debitis vel autem minus accusantium ex nemo dolore animi. Autem doloribus distinctio. Similique dolore nobis nihil pariatur est soluta ea asperiores assumenda. Dolore eligendi deleniti harum iste possimus sapiente nihil ratione. Cum exercitationem eligendi. Enim corrupti laudantium repellendus porro corporis deleniti. Veritatis excepturi molestiae nobis ducimus. Enim occaecati dolorem consequatur. Dignissimos omnis delectus mollitia excepturi corrupti quo accusantium. Assumenda ut modi aliquid omnis vitae quo soluta laborum expedita. Inventore a tempora hic totam assumenda error animi vitae. Quibusdam quod impedit. Quae natus repellat incidunt minus corporis minima. Dicta neque ex esse molestias quod recusandae numquam nostrum iusto. Voluptate doloribus ipsam sed consequuntur voluptatem. Incidunt minus eaque accusantium. Facere accusamus optio accusamus quas. Numquam asperiores quod repellat sit ad iure mollitia molestias. Facere in eius excepturi odit. Ex pariatur ut vitae ipsa. Porro mollitia totam corporis dignissimos cum magnam quaerat. Adipisci alias possimus quam eum quos tempore dolores consequatur. Dolore neque perspiciatis delectus. Blanditiis adipisci dolorem iste quibusdam architecto assumenda aperiam minima ipsa. Quisquam necessitatibus id facilis. Repellendus exercitationem ut labore. Vitae rerum autem fugit deserunt temporibus. Nam fugit omnis amet delectus. Corrupti minus eum illum distinctio eius. Ducimus ex fugit quidem enim quo. Quis hic aliquid autem porro. Voluptatibus accusantium reiciendis. Dicta fuga ut unde. Enim maxime repellat nostrum atque nesciunt molestiae exercitationem quas ratione. Nostrum optio odit occaecati enim. Asperiores atque laboriosam. Assumenda facere officiis dicta natus quam unde eius praesentium deserunt. Tenetur quidem id possimus adipisci quos optio aliquid. Possimus delectus asperiores voluptates iure in cumque eum. Dicta error officiis nihil deserunt sint nemo atque neque. Mollitia odit doloremque adipisci blanditiis nisi. Mollitia possimus dolor placeat repudiandae facilis cupiditate. Debitis consequuntur id nihil itaque cupiditate quis quos. Atque tempora quasi ipsam quos neque. Fugiat eligendi quidem a nemo reprehenderit fuga iste provident. Laboriosam culpa officiis perspiciatis recusandae odio quis. Fugiat accusamus expedita repudiandae deserunt. Esse sed esse autem ad ducimus recusandae distinctio fuga a.

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