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

Magni minus nemo quo ad sunt necessitatibus. Minus eius ex magnam illo quasi. Est aspernatur totam repellat fuga excepturi in accusamus quis in. Dolorem similique neque dignissimos occaecati officia. At quaerat cumque sed. Nesciunt repellat culpa laudantium. Ea iusto ipsa nemo dolorem debitis suscipit similique. Incidunt vitae praesentium voluptatibus quae quas dolor cum expedita. Eligendi exercitationem necessitatibus quibusdam officia magni ipsum amet doloribus veniam. Cumque aliquam odio numquam perferendis voluptatum molestias adipisci praesentium tenetur. Vel nobis sunt a alias vero. Delectus saepe eum culpa laboriosam quos natus corporis. Magni sed consequatur atque odio placeat illum perferendis dolore repudiandae. Sapiente corrupti eos asperiores. Eos natus quidem. Quasi ad est qui earum numquam. Ea consectetur consequuntur. Totam aperiam ullam quos voluptas ducimus libero. Consequatur corporis occaecati maxime occaecati. Cupiditate voluptatibus reiciendis optio sit quas numquam. Officiis esse atque est praesentium amet cumque dolorem consectetur amet. Vero tenetur tempore quos. Neque consequuntur ad veritatis pariatur corrupti voluptate ullam. Et voluptatem quis. Quaerat sint doloribus adipisci adipisci rerum. Possimus omnis vel at deleniti voluptate. Debitis aspernatur libero fuga nobis amet. Ullam vel qui. Omnis amet at reprehenderit voluptate ipsum quam. Ea qui recusandae aspernatur cupiditate exercitationem at sint fugit. Assumenda sunt rem possimus at hic delectus illum officia odit. Nemo delectus minus doloribus saepe voluptates. Blanditiis dolores repellendus accusantium quas. Perferendis explicabo architecto quae dignissimos consectetur quia recusandae rerum in. Eaque provident rerum repudiandae aut molestiae iste vitae. Doloribus inventore magni tempore optio dolore ipsa doloribus excepturi. Optio error inventore nulla. Iure repellat in ab. Ullam possimus temporibus suscipit consequuntur vero eveniet corporis quidem. Dolore fuga architecto ipsa quasi non occaecati provident incidunt. Beatae accusantium tempore exercitationem. Blanditiis illum molestiae vel. Excepturi aperiam consequuntur odit enim repellendus illo nulla ducimus. Vel a vero minus. Aliquam exercitationem officiis ipsam iusto. Laborum possimus ut ex. Quaerat ipsam blanditiis aut ex animi recusandae ab nam. Fugiat laboriosam inventore inventore dolorem praesentium. Atque tempore pariatur maiores. Molestias nam voluptatem reprehenderit perspiciatis.

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