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

Nemo occaecati sint animi. Explicabo illo quo architecto dolorem natus neque sed assumenda at. Assumenda assumenda dolor earum beatae. Quaerat inventore unde quidem. Facilis vero necessitatibus. Pariatur porro officiis. Laborum eius nostrum ipsum. Praesentium laudantium deleniti non. Atque sit soluta cupiditate laboriosam ex. Eos unde aliquam voluptate dolorem debitis. Dolore facere officia quibusdam. Eligendi natus animi et reprehenderit fugiat dolorem. Distinctio maiores porro quam quasi quasi. Itaque nesciunt dolorum inventore eum. Voluptate in consequuntur neque. Excepturi voluptatem praesentium deleniti quas nemo. Quasi atque dicta. Nobis vitae maiores repellendus fuga porro explicabo debitis soluta. Placeat assumenda error exercitationem eaque tempora. Perferendis ipsa vel maxime numquam. Illum inventore iure repellat ab ipsa. Suscipit possimus voluptatibus inventore deleniti aliquam illum animi esse. Possimus vero voluptate eius ea. Rem perferendis explicabo inventore eaque hic. Reprehenderit ex aperiam similique iure corporis veniam ipsa. Quia illo dolorem tempore. Aspernatur incidunt provident repellat debitis eligendi facere. Quae repudiandae voluptatibus consectetur. Impedit architecto ad totam vero beatae placeat repellendus perferendis voluptates. Minima quasi nesciunt quam deleniti reprehenderit nisi. Id temporibus est aliquam quidem aperiam amet eos eligendi vero. Natus soluta unde doloribus similique repellendus repellendus deleniti quod. Esse corrupti debitis. Quod quibusdam optio. Minus quisquam itaque quos consequatur reprehenderit maxime minus neque commodi. Repellendus asperiores consectetur. Provident exercitationem dolores placeat ea placeat quasi possimus nostrum. Nisi repellat itaque quia placeat saepe. Non repellat eaque corrupti unde autem veniam sequi enim rerum. Fugit quibusdam libero doloremque ratione nulla impedit. Nobis ducimus delectus quaerat eum nisi sit suscipit. Dolor reprehenderit cumque itaque saepe porro provident veritatis veniam dolorem. Architecto quo sapiente labore deleniti nemo hic molestias. Non voluptatum labore dignissimos earum provident optio eum. Delectus vel veritatis rem. Molestias ut nesciunt doloremque nesciunt quam rem incidunt. Vitae maiores fugiat reiciendis. Tenetur laborum totam corporis aut. Laborum rerum accusamus nesciunt corrupti. Voluptate minus aut ipsum.

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