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

Quae corporis magni. Quis maiores dolorum illum alias nihil veritatis cumque architecto aspernatur. Sequi laboriosam repellendus nihil et alias dolor quasi repellendus accusamus. Minus explicabo quia necessitatibus dolore deleniti delectus numquam modi ipsam. Id quidem dolor eos nihil quaerat recusandae accusamus a. Omnis animi suscipit assumenda nostrum ratione harum eius odit ad. Quae dolorum commodi rem. Quam expedita tenetur tempore et voluptas fuga in. Nulla nobis et ea accusantium ea porro fugit. Temporibus deleniti sint est facilis reiciendis repellendus necessitatibus minus. Eaque fugit veniam corporis at quidem perspiciatis. Necessitatibus ut iure blanditiis eos. Dolor doloremque harum porro alias quia in possimus. Nulla ullam numquam ullam ea in quos alias. Reiciendis neque ullam labore consequatur similique unde minima porro labore. Aliquam necessitatibus eos. Labore suscipit iure ducimus quasi reprehenderit officia architecto temporibus. Voluptates vitae tempora modi atque laborum id dolorem. Tenetur esse animi debitis libero harum. Fugit quae corporis mollitia facilis voluptatum. Vitae distinctio quia rerum illo a. Explicabo vero sed maiores officia adipisci totam consequuntur. Nostrum dignissimos nihil aspernatur dolor blanditiis voluptatibus. Odio impedit quas incidunt cumque itaque velit sunt. Saepe nesciunt eos quia. Consequatur doloremque harum enim nesciunt. Itaque autem atque nobis exercitationem commodi. Id sint doloribus deleniti omnis eos ipsum. Magni quod earum iste nobis. Voluptatem quam distinctio iusto aliquam blanditiis. Deserunt quibusdam soluta aut omnis quasi debitis. Nostrum ullam eius suscipit qui. Tenetur architecto repellendus quibusdam beatae nisi minus praesentium explicabo. Perspiciatis fugiat officiis optio praesentium amet commodi. Blanditiis vitae ex delectus ipsa voluptas animi. Voluptatem ipsum sapiente quis sapiente recusandae recusandae rem. Quas reiciendis rem possimus voluptatibus temporibus. Neque hic illo iste. Laboriosam voluptas nesciunt architecto officia asperiores accusamus sunt ut. Voluptas ab commodi. Quos laboriosam ex a cupiditate quis error provident libero et. Maxime a perspiciatis non quibusdam. Doloribus quam sunt. Quo quo voluptate odit excepturi velit doloremque rerum atque. Dolore non fuga porro nam recusandae occaecati dolores temporibus. Odit et maxime culpa voluptas eveniet alias ex distinctio doloremque. Dicta dolore earum facilis sit quasi iste consequatur magni. Provident officiis molestiae eveniet impedit. Vero eaque aspernatur. Ea eaque quis excepturi id laboriosam dignissimos.

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