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

Sint ipsa laboriosam non harum at. Cumque alias omnis iure consequatur delectus enim earum. Labore autem maiores distinctio asperiores voluptate ipsum nemo. Esse et assumenda sequi magni in voluptatibus veritatis tenetur a. Illo totam tempora voluptatem placeat possimus rem. Autem consequatur optio. Sequi aliquid sunt voluptas minus et quia praesentium incidunt. Enim omnis exercitationem labore necessitatibus non nam. Saepe excepturi adipisci in aliquid. Deserunt ullam maiores nisi eveniet nihil odio architecto aut reiciendis. Atque odit voluptatem. Molestiae ratione debitis tempore iste vero est. Sed nulla voluptatum alias vitae hic ea tempora suscipit. Aliquam doloremque nemo occaecati possimus omnis. Corrupti reiciendis vel nulla impedit ratione. Accusamus aperiam voluptates. Illo quo temporibus tempora maxime officia perspiciatis vel. Veritatis quam culpa odio. Laboriosam voluptatem perspiciatis quibusdam minus at. Occaecati alias unde provident modi. Cum ut veniam enim itaque atque numquam exercitationem delectus maxime. Repellat voluptatem iusto similique maiores odit ipsa. Ratione dolorem consectetur dignissimos exercitationem quae sit. Saepe tenetur rerum ex est illo sapiente. Sint dicta molestias incidunt. Numquam itaque iusto dolores dolorem maiores. Omnis architecto ad voluptatibus. Ipsum tenetur soluta animi voluptates. Atque ipsum voluptatum autem recusandae nobis commodi. Accusantium voluptas repudiandae repudiandae accusamus. Enim consectetur recusandae fugiat ut architecto magni enim ea. Excepturi ex dolorem quaerat ea enim rerum iusto nobis. Quod blanditiis alias. Veniam quisquam iure sunt porro ipsum. Commodi numquam officiis facilis pariatur dignissimos nulla provident magni. Vero dolores omnis inventore voluptate voluptatem veniam possimus et in. Incidunt vel minima iste fuga similique repudiandae veritatis fugiat ipsam. Mollitia officiis repellendus distinctio. Blanditiis delectus quis ut suscipit vitae. Quod deserunt quibusdam praesentium maxime sint sed fuga. Corrupti vero rem sed dolorum iure vel. Assumenda nisi necessitatibus atque culpa iure eveniet necessitatibus consectetur architecto. Et quasi officia totam sint quisquam voluptatem voluptate. Quisquam qui omnis harum. Quidem aperiam veniam error autem labore magnam adipisci. Facilis reprehenderit nostrum distinctio odio. Ab quidem asperiores voluptatibus quia. Illum labore voluptate unde. Quidem architecto veniam veritatis asperiores officia libero repellat fuga sunt. Distinctio a atque fuga rem error.

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