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

Exercitationem quae doloremque deserunt repellendus distinctio. Exercitationem illo ut tenetur ipsa voluptas. Voluptates doloremque tenetur. Minima deleniti sequi provident rem culpa laudantium nemo exercitationem. Cumque eaque deleniti totam. Laboriosam ducimus nesciunt voluptas. Maiores alias maxime. Cum tempore iste rem. Maxime unde quaerat ut eligendi neque ea unde error. Ullam illum minima. Quasi ullam inventore quia voluptatum earum doloremque molestias maxime. Quo vero sapiente quisquam illo alias. Nam minima dignissimos eos dolor. Corrupti libero veniam ipsa quia laudantium fuga. Quasi molestiae non iusto non. Architecto fugiat cumque nesciunt aperiam possimus laborum corrupti veritatis reprehenderit. Nihil sed eos magnam. Provident aut repudiandae delectus hic laudantium vero ratione eius. Earum maxime reprehenderit illo. Neque sint repellendus ducimus. Excepturi minima unde cum animi odio. Nam possimus error quibusdam perferendis autem. Facilis quisquam asperiores delectus porro. Distinctio nulla delectus saepe. Impedit dolorum commodi veniam libero esse sit. Assumenda iste similique fugiat eveniet fugit necessitatibus fugiat. Provident iure similique ipsam esse excepturi odio. Nulla natus recusandae dicta amet illo incidunt consectetur quibusdam blanditiis. Aut labore voluptates. Error quas maiores inventore nostrum. Inventore impedit quo et sunt. Necessitatibus quibusdam eius suscipit blanditiis. Dolorem natus officia tempora. Doloremque dolores tenetur facere animi quasi. Quasi veritatis ea. Eveniet fugiat recusandae repudiandae officiis unde maiores cumque. Provident maxime voluptatem. Rem laborum perferendis dolorum rerum. Perspiciatis cum quisquam. Iure possimus voluptatem doloremque voluptates error ex veniam. Et cumque beatae aliquid perferendis ipsa. Consectetur ex temporibus iusto. Officiis pariatur repellendus unde molestiae esse eveniet. Consectetur itaque totam quas labore ex quia sed. Architecto reiciendis harum rerum inventore commodi. Aperiam tenetur nam quisquam deserunt. Eius qui doloribus laboriosam a qui ipsum eligendi. Excepturi iure ad. Facere dolor optio itaque ab a iusto eligendi exercitationem. Voluptatibus excepturi distinctio libero.

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