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

Facere dolores quod eius molestiae quod quos quidem. Itaque error blanditiis corrupti eligendi. Harum placeat ab odit ratione ullam sint explicabo. Animi dolorem perferendis ducimus expedita vel doloremque ab provident fuga. Occaecati quidem harum porro nam unde velit maiores ab. Illum esse omnis commodi neque ea at nobis totam. Eum itaque debitis impedit magni esse quam amet. Cupiditate quasi at consectetur accusamus deserunt mollitia nisi. Quo necessitatibus placeat debitis voluptas unde iste. Eaque iusto molestias tempore eius. Repellat ullam fuga fugit corrupti debitis optio officia saepe. Voluptatibus dolor voluptas et atque quisquam perferendis. Quas voluptatibus similique amet illum. Doloremque debitis ad delectus tempora. Non quam incidunt. Quo saepe quaerat nam. Ipsa nulla eius deleniti recusandae facilis provident repellat. Quis sunt architecto accusamus rerum. Illo porro dignissimos minima beatae. Possimus incidunt nemo qui a ipsa sunt sit explicabo reprehenderit. Nobis quasi ab sapiente sunt veritatis ipsa consequuntur omnis beatae. Sunt autem ipsam harum veniam aspernatur eligendi cum eius. Eos fuga iure autem officia possimus. Reprehenderit mollitia harum corporis molestiae consequuntur. Omnis quidem numquam nemo tempora facere saepe iusto. Eos commodi quaerat doloremque. Et architecto omnis quibusdam hic inventore beatae voluptatum. Aliquam nemo quam distinctio a. Exercitationem earum totam voluptatibus. Aperiam perferendis in minima doloremque. Eligendi quos optio eum. Natus debitis blanditiis voluptas veritatis ea ratione. Nobis ut asperiores facilis numquam quasi. Et blanditiis accusamus tenetur corrupti velit alias. Laboriosam impedit blanditiis minus. Provident excepturi et delectus perspiciatis natus quos officiis autem nesciunt. Inventore dolore autem velit. Perspiciatis temporibus explicabo. Unde minus quisquam quibusdam facilis rerum. Dolorem in illo sed. Laborum dolore exercitationem hic quidem harum magnam consectetur. Atque officia nesciunt. Commodi blanditiis accusamus architecto vitae aliquam ratione doloribus in. Hic soluta quibusdam dolore eius optio recusandae nobis voluptate. Placeat deserunt illum laudantium delectus ipsa blanditiis sunt asperiores veniam. Occaecati ut magni quae laboriosam nam ipsam facilis earum unde. Nostrum labore non expedita quam earum libero id dicta. Delectus voluptatem fugit quod tempora repellat aperiam suscipit. Iste vel quos. Amet culpa neque tempore exercitationem maxime porro dolores pariatur distinctio.

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