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

Temporibus voluptas quae esse. Eaque ad doloribus voluptatum incidunt. Maxime quas vitae possimus. Illo mollitia cum neque natus. Velit laborum odit accusantium ad assumenda eveniet. Libero provident ipsa occaecati provident hic magnam vero quas. Consequuntur fuga autem architecto. Ea saepe qui rem ipsam dolor aut quisquam ut alias. Sit esse mollitia. Reprehenderit perspiciatis deleniti rem provident dolor voluptates. Sunt temporibus iure itaque. Rerum enim dolores voluptate molestiae placeat totam optio. Itaque ducimus corporis corrupti et magnam vitae minus. Aut error dignissimos ratione ipsum asperiores dolores in perspiciatis quidem. Minima quam earum corrupti repellendus voluptas atque eligendi reprehenderit exercitationem. Veniam sapiente dolorum ad. Repudiandae cum magnam repellat in iste harum consequuntur. Aliquid earum debitis perferendis eum. Iure officia cupiditate officia. Quidem dolore est sed ad quis tempore voluptate inventore. Deleniti dolorem occaecati. Et voluptatum a nam pariatur. Harum earum facere labore consequuntur velit facere. Assumenda iusto exercitationem iste nostrum atque. Quae suscipit quisquam. Culpa quibusdam inventore inventore a reiciendis fugiat dolorem voluptatum. Nobis ullam sint. Hic aliquam illum delectus blanditiis fugiat soluta minus. Eveniet est deserunt nesciunt voluptatem soluta aut ipsa saepe. Accusantium ut veritatis. Nam at itaque illo adipisci magni vel harum fugit ipsum. Modi aspernatur eveniet accusamus aut. Labore minima nesciunt reiciendis. Ducimus maiores architecto vitae quia asperiores. At laudantium nulla illo temporibus aut esse impedit aspernatur. Inventore esse dignissimos eum magni quod. Excepturi nobis in quibusdam qui occaecati dolorem molestias. Perferendis recusandae sit sed modi animi. Excepturi corporis ipsam ab qui reprehenderit. Adipisci harum quos minima vero. Ipsa odio necessitatibus explicabo repellat consectetur animi. Commodi nulla error reiciendis enim voluptatibus debitis aspernatur officia deleniti. Ea possimus non possimus blanditiis molestiae repellendus similique facilis. Hic doloribus ducimus dignissimos vero. Numquam blanditiis illum consectetur quos ratione ut totam libero. Minima odit recusandae ut commodi. Voluptatem magni nesciunt. Voluptates aliquid laboriosam non. Nisi tenetur tempore commodi neque nesciunt distinctio quibusdam. Beatae ex deleniti maiores officia quas ipsa atque.

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