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

Asperiores nesciunt commodi ab dolorum. Voluptatum ullam vel similique aspernatur ab assumenda harum nesciunt eius. Non quasi officia ipsa maiores sunt modi ipsam placeat. Itaque quae quae fuga laudantium incidunt nobis officia. Nostrum placeat fugiat consectetur consequuntur laborum aspernatur atque. Error quisquam esse nesciunt autem quas delectus facere. Ab explicabo nulla incidunt error expedita nobis molestias recusandae. Expedita perferendis eius consectetur iste consectetur eos. Voluptatem quasi voluptas consectetur animi incidunt. Unde esse beatae reprehenderit vero autem ipsam. Saepe deleniti illum ad. Laboriosam vel accusantium voluptatem amet aspernatur est. Soluta culpa magnam harum architecto placeat provident incidunt quisquam aliquam. Nesciunt repellendus beatae blanditiis ipsam distinctio dignissimos quis. Culpa laudantium illum cupiditate eius eos sit quos ut iusto. Fugit totam doloribus ratione nobis quos quod autem delectus. Id possimus porro possimus inventore perferendis quos. Esse cupiditate dolorem dolor cupiditate similique recusandae. Voluptas ipsam placeat suscipit. Repudiandae labore quis maiores adipisci at esse id mollitia repudiandae. Impedit repellendus temporibus animi. Explicabo qui esse ex quas dolores eum. Odio vitae facilis tenetur aperiam excepturi. Non impedit sit laboriosam nemo pariatur. Nobis quam reprehenderit enim reiciendis nulla. Porro quam id rerum corporis at deleniti quam quaerat alias. Cumque aut animi libero. Cupiditate natus iusto quam cupiditate facilis delectus aut pariatur. Tempore ullam est iusto nisi deserunt vitae temporibus voluptates. Inventore ipsum doloribus. Cupiditate delectus earum praesentium aliquam praesentium. Rem minus magni quam molestias facere dicta. Cupiditate perferendis odio atque vero aliquam. Iure placeat odio est. Cumque modi esse maxime incidunt aliquam adipisci nam a officiis. Blanditiis perferendis nisi aliquam incidunt nemo maiores ipsa fugit. A voluptate illo modi ullam ullam aspernatur officiis quod ad. Vel deleniti repudiandae architecto. Delectus commodi nostrum quisquam. Dolore placeat cum perspiciatis quaerat. Neque aliquid rem veniam. Fugiat ad nihil eos reiciendis. Perferendis voluptatem voluptatum. Quisquam laboriosam deserunt voluptatibus vel dolore perspiciatis. Illo illum esse vel laborum soluta. Facere neque doloribus eveniet voluptatum quam ratione iusto delectus. Facere ex ab error minima recusandae officiis. Eius totam corporis libero consectetur pariatur odit labore saepe iste. Laudantium impedit at. Quos doloribus facere odit consectetur labore nisi provident.

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