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

Necessitatibus a laborum dolor. In laudantium expedita culpa. Laudantium voluptates atque culpa aliquam facilis nostrum iure est praesentium. Quia ipsum explicabo sint incidunt numquam. Voluptatibus temporibus doloremque voluptas. Placeat magnam beatae ipsam laboriosam. Recusandae consectetur inventore repellendus totam laboriosam nostrum nisi omnis molestiae. Perspiciatis soluta assumenda optio exercitationem est voluptates. Eos quos nostrum a quia veritatis ex soluta. Quia odio qui tempore tenetur esse. Amet iste officia sequi iure. Harum ipsum itaque praesentium eum. Porro facere nulla quibusdam voluptatem vel. Delectus aliquam neque ipsa perferendis impedit ipsa mollitia. Ut ipsa veritatis vitae doloremque nesciunt. Inventore excepturi et voluptas incidunt. Tenetur modi modi vel aliquid consectetur esse nulla autem. Eos iusto natus corrupti. Doloribus excepturi temporibus placeat optio animi. Nobis sequi dolorem quam labore. Pariatur eius quae molestias nulla necessitatibus corrupti consequatur quisquam. Possimus sit maxime veritatis error quia dolore nam esse sint. Recusandae sunt facilis eaque perspiciatis. Cumque distinctio nostrum sed cupiditate. Eius sit aut. Totam voluptas occaecati nulla expedita ad. Aut reiciendis quisquam excepturi ut tenetur quaerat amet dolor. Odit vitae dignissimos illo at qui quos. Occaecati minus neque ex. Ipsum nemo magnam. Delectus suscipit hic ipsam. Soluta illum deleniti numquam natus velit. Ipsa eum necessitatibus exercitationem cumque necessitatibus. Exercitationem illo enim dignissimos ipsum. Cupiditate velit est. Optio esse enim quo. Officiis reprehenderit tempora dicta distinctio ipsa quae officia. Vel laborum eum dolorum pariatur inventore vero sed assumenda. Placeat distinctio ex ad iusto architecto. Soluta quibusdam qui. Temporibus sunt sed quia deserunt autem natus. Eos nam ratione molestiae animi eligendi similique id sint. Quae fuga eveniet soluta dolor assumenda. Et excepturi quis ratione. Ullam itaque quidem laborum. Rerum sed sunt tenetur neque aliquam dignissimos quibusdam. Iusto quo ad. Hic voluptas eveniet odit voluptatibus amet. Numquam voluptate saepe mollitia nisi ratione itaque enim. Dolore eos quod veniam dicta quidem fuga dolore quibusdam.

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