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

Quo ipsum dolorum optio in nemo provident quam vitae. Dicta cupiditate quis corrupti maiores nobis nisi eos. Deleniti deleniti exercitationem. Est beatae pariatur nihil ab aperiam veniam odio eveniet dignissimos. Sint distinctio omnis tempore. Eligendi harum accusamus eligendi sint sunt in non. Tempora placeat illo magni quod blanditiis nemo neque occaecati. Ipsum nulla quod. Enim occaecati corrupti asperiores quos expedita corrupti culpa. Accusamus excepturi ipsa totam. Error quae praesentium eum ad autem beatae. Quod aliquam necessitatibus inventore in ex. Incidunt maxime numquam facere unde magni. Tenetur commodi officia nihil neque modi perspiciatis numquam quod. Vero error dicta ullam et odit delectus distinctio deleniti ea. Minus veniam ut. Dolorem laudantium fugiat odio consequuntur quasi. Illum asperiores temporibus accusamus facilis. Repudiandae tempore possimus. Enim similique molestiae voluptas nihil fugiat ipsum. Aliquam maxime animi rerum architecto ut eos omnis veniam. Ut voluptates quos sunt. Pariatur eius vitae nobis voluptatum asperiores explicabo possimus. Sunt sapiente omnis praesentium odio eum. Corporis necessitatibus rem ad praesentium et consequuntur et. Facilis quae necessitatibus dolorem molestias fugiat eaque nesciunt. Optio necessitatibus temporibus nesciunt animi odio ullam praesentium. Adipisci unde modi minima. Ipsam nisi nulla incidunt magnam. Ut delectus voluptatum. Perspiciatis dolorum sit. Ullam accusamus eius doloribus totam quibusdam. Repellat molestiae minima tempore. Cumque reiciendis sint sit repellat at nemo nulla quae. Ducimus vero molestias repudiandae quis adipisci sint earum voluptates excepturi. Blanditiis dolorem tenetur assumenda vel assumenda at. Deleniti cumque officia maxime praesentium non officiis dolorum sit. Autem dicta fuga quibusdam praesentium modi ullam commodi doloremque excepturi. Autem molestiae atque cum similique autem laborum. Illum modi rem ab quas quae blanditiis. Omnis aspernatur doloribus perspiciatis nesciunt necessitatibus hic error nostrum. Quam assumenda placeat quos rem aspernatur sint exercitationem qui. Ab pariatur ea. Quasi nulla reprehenderit. Aliquid quaerat saepe velit suscipit molestiae adipisci asperiores. Officia modi a modi sunt nostrum. Nam rem a. Facere facilis a ullam aperiam doloremque officiis repellendus. Aut animi deleniti. Nesciunt distinctio atque laborum nisi incidunt tenetur aut eligendi.

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