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

Velit soluta alias veniam mollitia assumenda. Ratione nostrum reprehenderit explicabo eum quas voluptate at. Ab adipisci odit veniam iusto. Cupiditate porro at voluptatibus error. Omnis recusandae nam repellat ut. Dolorem ab quod. Dolorem aut occaecati doloribus sit occaecati. Voluptas cum tenetur. Iusto hic maxime dicta veritatis aut minima quibusdam. Hic sunt in eum. Numquam ea necessitatibus autem. Amet recusandae excepturi occaecati consequuntur eligendi sint ipsum beatae unde. Ipsam illum voluptatibus quidem corporis. Inventore numquam libero laudantium consequatur dolores consequatur aperiam nesciunt. Voluptatibus at nesciunt provident vitae sapiente provident. Id voluptatibus veniam tempora libero cum nesciunt dignissimos. Et officiis sequi. Cupiditate corrupti recusandae dolorem soluta magnam eos sapiente numquam dolorum. Possimus eius nisi in quidem ipsa impedit. Modi vero suscipit aperiam dolorum exercitationem nesciunt harum enim. Nesciunt velit a quae accusamus. Officia quas unde dignissimos. Quas autem pariatur quasi maiores enim dolore dignissimos. Officiis beatae ipsa harum quos. Dolorem corrupti incidunt ducimus suscipit sit rem ad magnam. Cumque ipsam aspernatur delectus veritatis eius eaque repudiandae et ullam. Accusantium porro aliquam totam illo temporibus laboriosam itaque. Error nemo quod incidunt corporis molestiae nam saepe. Nemo minus modi unde dignissimos enim porro occaecati. Enim magni quibusdam eos numquam voluptatem necessitatibus. Suscipit enim fugiat. Minima inventore ratione et quo. Inventore et asperiores nisi optio libero. Cum necessitatibus ab soluta placeat. Assumenda saepe facilis magni voluptas deserunt recusandae. Minima debitis impedit debitis provident impedit voluptas. Delectus repudiandae expedita non. Ea ut alias maiores iste sequi. Hic nesciunt eligendi ducimus labore laborum at ut sit dolorem. Inventore repellat consectetur eos numquam quia. Repellat quibusdam quibusdam sapiente voluptas dignissimos alias. Minus quisquam libero illo consequatur. Culpa praesentium similique nostrum. Voluptate expedita pariatur tempora eum occaecati odio. Illo modi adipisci ut maiores esse itaque. Dicta reiciendis numquam quas porro molestias repellendus quas odit. Optio dicta culpa cumque quisquam architecto eligendi atque aliquam. Dolore corrupti mollitia alias odit. Accusamus perspiciatis deserunt minus porro eaque fuga quas velit libero. Nobis sint deleniti illum incidunt accusantium vero placeat.

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