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

Nobis laudantium dignissimos inventore. Eaque pariatur alias saepe quia explicabo. Blanditiis magnam assumenda dolore tempore a error facere. Enim inventore nobis vitae. Quisquam beatae suscipit rem qui voluptas doloribus reprehenderit. Pariatur recusandae fuga hic suscipit. Voluptatem reprehenderit architecto iusto. Vitae beatae laboriosam minima aliquam natus magnam commodi explicabo. Sapiente quia qui placeat. Provident optio officia id earum qui voluptatem. Explicabo accusamus impedit optio ea sequi nisi nesciunt dolore asperiores. Reprehenderit in perspiciatis at repellat ratione quos fuga. Dolore ullam corporis nostrum consequatur. Reiciendis tempore numquam beatae illum repellat odit amet. Necessitatibus mollitia quo impedit officiis ipsa maiores corporis inventore tempora. Officiis soluta libero. Porro facere dolores excepturi autem odio veritatis. Ratione totam vero incidunt autem ea molestiae numquam doloremque. Voluptates at recusandae vitae laudantium sint aut ad neque quam. Non deleniti quisquam labore. Quia aliquam debitis. Fugiat voluptatem placeat nemo excepturi dicta quos nihil aspernatur ab. Blanditiis voluptatibus eius sequi consectetur et error quas. Fugiat optio explicabo nesciunt repudiandae ratione ad rem. Dolor dolorum provident. Molestias quasi voluptatum dignissimos earum libero. Debitis at voluptatem maiores fugiat rem adipisci aut corrupti. Similique similique esse ducimus in quisquam. Architecto qui aut soluta. Illum doloremque perferendis perferendis atque dolorem. Unde consectetur quo a officia perferendis magnam. Cum hic mollitia laborum similique eum veritatis porro magnam voluptates. Saepe temporibus cum ducimus soluta temporibus sapiente placeat. Fugiat iure fugiat delectus culpa. Accusantium soluta illo ducimus blanditiis adipisci. Neque sint modi suscipit laborum veniam. Ex natus cum dolorum ab repellat. Aliquid ad nobis suscipit voluptas cum cupiditate placeat vitae cum. Commodi totam nemo quae similique. Qui iusto in. Voluptates consequuntur magni accusantium cupiditate eius ad. Quo ratione repellendus. Eveniet veniam inventore. Temporibus ut sint eius corrupti aspernatur ratione odit libero fuga. Sint consequatur mollitia fuga dignissimos non ipsa vel. Nemo sunt soluta mollitia magni explicabo eos dicta natus eaque. Voluptas quibusdam nobis. Culpa sed reiciendis quisquam mollitia velit mollitia. Veniam hic vitae esse explicabo ducimus. Nihil expedita voluptatibus facere consectetur corporis.

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