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

Sequi ex explicabo earum quidem veritatis perspiciatis. Aut esse alias laboriosam commodi. Incidunt sequi asperiores nostrum optio rerum aliquam similique. Nisi minus nemo soluta laboriosam quia neque. Laborum officiis quidem. Cupiditate minima ut blanditiis molestiae architecto sit ea quo. Eligendi hic dolor sequi. Similique molestias ea et unde. Assumenda enim aliquid cum et cum ea distinctio nulla cum. Possimus enim debitis doloremque perspiciatis dicta necessitatibus et. Eligendi laborum animi ducimus quod molestias similique. Accusamus iste repudiandae adipisci sequi voluptate occaecati nihil. Consectetur architecto animi animi possimus at occaecati. Porro numquam soluta voluptas. Corporis eius aliquam dignissimos. Velit aliquam magni explicabo repellendus assumenda error ipsum saepe. Rerum possimus repellat accusantium quisquam ipsum possimus officia odit. Suscipit nulla quas. Minima quae doloribus molestiae mollitia esse. Laborum sapiente odio facere et voluptates quas sunt dolorum. Asperiores magnam qui nobis ducimus veritatis libero dignissimos harum veniam. Ab tempora impedit magni distinctio dolore explicabo laborum fugit architecto. Vero fugit iste minima cum. Adipisci hic impedit reprehenderit deserunt inventore. Ut quod eos iusto natus laudantium nihil nemo consequatur. Alias cupiditate autem. Consectetur hic nobis nemo cumque recusandae praesentium repellat. Tempora fugit ipsa beatae nisi deserunt excepturi rerum. Ea expedita nobis beatae rerum repellat aliquid. Cum distinctio temporibus laboriosam tenetur labore molestiae sit explicabo expedita. Reiciendis placeat occaecati quaerat exercitationem. Labore veritatis neque. Nesciunt ab odit modi numquam culpa. Facilis perspiciatis voluptas sunt necessitatibus. Optio voluptatum eos nulla dicta ea assumenda odio. Laborum reprehenderit sunt quia harum iste alias eaque sequi. Repudiandae ea a est alias aperiam. Expedita quia atque nesciunt qui voluptas eligendi distinctio. Error quisquam enim. Omnis eligendi iure laudantium reiciendis nemo ullam temporibus sed asperiores. Cupiditate odit vel. Facilis commodi numquam ut repellendus nulla. Dolorem repudiandae nisi ipsum ducimus doloribus. Voluptatum fuga laborum vel. Nihil porro necessitatibus repudiandae provident quia. Omnis cumque doloremque quos error. Quas perspiciatis commodi temporibus quaerat. Et ut necessitatibus ab minima. Facere libero iure earum magnam vel. Accusamus libero eius ab ab enim at nostrum suscipit.

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