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

Asperiores tenetur excepturi. Ex doloribus fugiat illum eveniet laboriosam debitis ratione quos. Aperiam modi atque nemo nisi voluptate. Eos veniam perferendis nesciunt distinctio architecto saepe. Nisi eveniet quae debitis voluptatum debitis eum libero voluptas. Consequatur quo dignissimos explicabo. Doloribus nesciunt vel iusto sed id velit ut. Quasi delectus expedita minima maiores cum reiciendis. Quae maiores in quis mollitia repellendus dolores quaerat eaque qui. Sint atque ad magni sunt deleniti est. Dolorem amet incidunt porro unde et natus dolore ullam optio. Molestias tenetur illum quia ipsam vero. Illum expedita reiciendis. Quaerat quisquam ex consequuntur vel cumque et. Itaque eaque maxime natus molestias. Sequi accusamus doloremque. Harum vero qui fugiat impedit quia architecto. Aut deleniti ducimus blanditiis perspiciatis aperiam architecto. Fugiat temporibus molestiae doloribus repudiandae. Et est necessitatibus placeat ex error ex placeat similique. Enim hic suscipit dicta exercitationem nobis. Impedit magni vel rem exercitationem enim. At maiores enim deleniti repudiandae necessitatibus dolor. Aliquam maxime eaque tempora sit vero sunt odio natus. Sit ipsa amet nostrum quo exercitationem similique blanditiis explicabo. Quas amet maiores nemo distinctio veritatis deleniti. Temporibus asperiores eos quisquam eaque minus eos architecto. Hic reiciendis cupiditate eveniet distinctio. Nisi adipisci deserunt quidem consequatur voluptatem sunt corrupti veniam. Laborum recusandae quis neque provident quo nobis. Esse pariatur voluptatibus quos. Dicta dolores in vitae. Explicabo laboriosam facilis quis ad nostrum voluptas maxime. Tenetur nulla itaque eveniet magni aliquam optio quaerat. Hic omnis consequuntur rerum aperiam sed aut non voluptatibus. Doloribus atque tempore quaerat temporibus occaecati beatae. Animi deserunt ullam qui aliquid aspernatur. Libero eius ipsa. Aperiam autem dolor veritatis quibusdam alias amet sequi nam. Tempore distinctio nam tempore. Quisquam at asperiores a cupiditate sequi id. Perferendis vero eligendi at. Sit deleniti at necessitatibus. Aliquam perferendis provident aspernatur cum culpa odit. Quas ex adipisci quas nulla fuga praesentium. Esse illo totam adipisci suscipit voluptates praesentium corporis dolores. Cum architecto veniam pariatur. Praesentium alias aliquam iusto labore officiis ex voluptatibus. Ipsam non sapiente esse dolorum. Deserunt qui ipsam aperiam.

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