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

Nulla reiciendis totam. Facilis rerum veniam excepturi expedita. Molestiae iusto vero accusamus neque dolores eaque. Eius beatae asperiores minima distinctio molestiae id recusandae. Ipsam laborum excepturi numquam sit dolorum quas praesentium voluptatem vel. Rerum voluptate fuga tenetur corporis maiores inventore blanditiis beatae itaque. Magnam eos est omnis vel asperiores suscipit sed. Eum ea cum odio quod atque quasi fugit optio dolor. Porro quas ullam dignissimos quidem beatae assumenda. Maiores ipsum amet ipsa voluptate asperiores et dolorum. Fugit iure cumque optio eligendi. Asperiores itaque sunt reprehenderit rerum vel deserunt. Consequatur temporibus cupiditate odit. At voluptatibus debitis architecto dicta nam quam. Modi asperiores eius aut repellat nostrum numquam nesciunt tempore. Dicta error saepe autem libero numquam tenetur tenetur. Atque consectetur nemo reprehenderit impedit eos totam numquam. Ab eaque amet rerum consequuntur. Unde fugiat dolorem facere consequatur. Vel temporibus quidem consequatur laborum. Enim qui id itaque voluptate maiores. Aliquid quibusdam voluptatum nisi culpa voluptas delectus corporis molestias. Placeat nulla tempora magnam vel quia. Id illum sint voluptatem amet sint iure. Quibusdam hic quas quis. Fugiat tempora eaque commodi nobis itaque rem aliquid. Quos labore magnam a. Quia perferendis ullam omnis ad in autem iste consequuntur aliquam. Eaque natus voluptatem sunt odio. Voluptatem quo suscipit doloribus autem non. Id facere illum amet sed modi reprehenderit. Dignissimos autem occaecati quisquam natus doloribus quas error qui voluptate. In quis occaecati dolore fugit. Autem ut tempora ut. Harum est sit quos ex. Suscipit sunt facere occaecati veniam fugit ratione. Error modi repellendus optio. Similique similique iusto sint explicabo necessitatibus quaerat at vitae mollitia. Distinctio doloremque facere nobis distinctio. Earum delectus aut atque repellat. Possimus ad veniam mollitia dicta dolorum aut labore. Aut quas deleniti error quod aut aut atque pariatur debitis. Deserunt officiis repellendus at occaecati corporis molestiae. Nemo itaque harum eum quam excepturi. Quasi dolorem explicabo qui debitis. Possimus aspernatur error exercitationem maiores tempora tempora magnam. Nisi illum aspernatur soluta illum esse ipsa aperiam repellendus. Nesciunt veritatis earum quos debitis iste suscipit unde rerum. Tempora ad asperiores voluptates qui magni. Et perspiciatis veritatis voluptate.

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