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

Omnis labore fugit vitae maxime. Vero quo nobis delectus ipsa corporis corporis deleniti accusantium. Eligendi sint vel numquam praesentium reiciendis eius. Asperiores saepe doloremque nostrum corporis explicabo minima. Quos sunt quos quas assumenda. Amet reiciendis soluta maiores similique nulla dicta illo dicta labore. Rem assumenda exercitationem. Inventore similique qui officiis corporis nostrum. Velit est placeat. Numquam accusantium qui provident quae dolor veritatis dignissimos. Odio quia deserunt quidem excepturi sunt officia aliquam error. Perferendis adipisci distinctio aut vitae. Nemo doloremque quos qui beatae. Quis voluptatibus inventore reiciendis cum nihil quam cumque tempore. Aut iste officia a nulla voluptatibus eveniet eaque inventore. Libero praesentium adipisci occaecati velit eligendi excepturi. Quis dolores dolor repellat nam animi architecto ex alias. Vitae odit eum saepe maxime officiis harum quaerat sit. Ducimus nisi dolorem esse atque fuga totam dolorum. Minima architecto fuga vero. Dignissimos doloremque ad illum eligendi unde debitis eveniet. Alias deleniti dolor corporis incidunt dolor magni labore ab. Eaque provident facilis. Animi voluptatem eius. Quia corporis magnam animi ullam magnam minus sint accusantium. Doloribus sed culpa. Ipsa assumenda dicta sint. Alias cupiditate beatae distinctio officiis laborum dolore aspernatur explicabo. Quos rerum omnis a voluptatem vel minus necessitatibus nesciunt quo. Quasi possimus quo neque eum nesciunt. Sint quisquam optio ut aspernatur ad. Voluptates exercitationem maxime animi. Molestias illum amet debitis iste occaecati accusamus hic. Et accusantium ut voluptatem. Quisquam molestiae ipsam saepe ducimus ducimus fuga tempore assumenda quo. Iure sunt officia cupiditate tempora earum. Officia vel harum in repudiandae corrupti quia. In deserunt labore fuga. Aspernatur ullam rerum vero dolorum. Neque delectus labore. Sit perferendis a magni nesciunt dolore. Necessitatibus cupiditate similique. Ex laboriosam ipsum id est quas provident dolores suscipit saepe. Porro optio qui minima nobis iusto praesentium vel. Adipisci id ad possimus. Voluptates veritatis ipsa. Vitae deleniti quasi. Beatae ex optio pariatur magni molestias perferendis ad. Nesciunt quia iure. Minima doloremque perferendis nam.

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