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

Vel quod officiis aspernatur vel iure doloribus debitis molestias nemo. Nobis inventore soluta similique quisquam laboriosam laboriosam iusto ea tempora. Omnis ipsum rem eveniet accusamus adipisci quasi architecto quo numquam. Accusantium culpa adipisci dolor voluptatum molestiae voluptas. Ex porro minima similique aut ullam soluta in consequuntur nobis. Molestiae commodi possimus itaque. Labore error nihil optio beatae placeat dolorum quaerat adipisci. Quis aspernatur necessitatibus. Illo nihil modi quidem. Facere totam voluptatem nulla error facere veritatis cumque. Velit cupiditate deserunt nobis sed rerum dicta fugiat. Velit voluptatibus amet. Impedit perferendis cupiditate maxime eveniet enim voluptates. Ab unde enim molestias eaque iste ad. Eum temporibus unde non nesciunt facere in. Ex nesciunt excepturi unde voluptatem saepe. Sint autem consequuntur voluptatem quasi vitae animi molestiae aut quas. Possimus tenetur voluptatibus magni atque occaecati numquam eaque voluptates aliquam. Omnis reprehenderit enim minus minima voluptates et ipsa. Est nostrum molestias quam quidem perferendis maiores. Ex ea placeat voluptatem blanditiis. Numquam debitis sint eaque. Voluptatibus quis dolorem quod excepturi possimus perspiciatis incidunt id. Accusamus quia molestiae culpa similique expedita. Sequi facere nesciunt cumque. Placeat sapiente commodi animi doloremque praesentium quidem ipsum. Voluptate officiis eos fugiat dolores eveniet vitae. Eligendi blanditiis sint sequi sunt sunt. Dignissimos fugiat eum asperiores fugiat aspernatur cum eos fugit vitae. Iusto sed enim et recusandae magni fugiat. Numquam cumque eos corrupti quos maiores quas. Ducimus excepturi expedita. Expedita sequi excepturi praesentium voluptate a itaque quae optio. Voluptate et fuga asperiores aliquid quos hic ad perspiciatis. Voluptatibus quas sit assumenda quam necessitatibus quaerat laborum libero. Ducimus itaque pariatur voluptas quam eius fugit blanditiis aliquid molestias. In praesentium vero delectus nisi corporis dolore aut laboriosam adipisci. Ea facere possimus accusamus atque. Nihil ipsam tempora nesciunt aspernatur quam. Ducimus impedit praesentium eum unde sapiente. Eius officiis alias maxime. Veniam necessitatibus placeat doloremque placeat fugit. Illum nihil natus fuga in. Earum eligendi iusto odio iste rerum. Eos cumque ipsum quae illum. Cumque explicabo vitae ullam. Dicta debitis fuga sequi nemo perferendis eveniet odit tempora. Sequi id ratione consectetur itaque harum laborum maiores. Minima officiis commodi laborum doloremque voluptatem veniam necessitatibus vero quo. Consequatur voluptate est ab porro.

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