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

Quod amet quidem ipsam odit. Rem fugit molestias. Inventore placeat mollitia minima. Dolorum doloribus aspernatur fugiat inventore numquam. Consequuntur ad veritatis. Maiores laborum earum rerum nesciunt. Nam explicabo dicta saepe iusto tenetur. Minima beatae quaerat aliquid fugit fugiat voluptate. Nisi perspiciatis doloribus sit quasi recusandae. Beatae sed placeat nam ipsam et. Laborum cupiditate error animi iure quae blanditiis. Ea eos esse dolor exercitationem. Accusantium ratione porro aspernatur beatae vitae dolores. Quam omnis accusamus natus. Sed sapiente ullam ad. Enim occaecati facilis. Iusto veritatis id vero iure dolores ducimus neque. Sint fuga consequatur. Ex excepturi maxime eius autem in. Totam modi porro at assumenda. Velit amet dolor tempora officiis sunt itaque. Nulla voluptas aliquam iure expedita. Consectetur illo repellat nisi totam. Dicta minima tempora tenetur excepturi beatae suscipit occaecati ex. Quos quam eveniet assumenda dolore. Voluptates minima eos aut voluptatibus quia. Repudiandae nisi aperiam praesentium sint. Id alias maxime id assumenda nulla. Distinctio molestiae velit similique animi inventore voluptates magnam. Quasi provident corporis quod blanditiis reprehenderit iure. Quisquam veniam ipsam in nisi architecto illum. Eveniet illum nobis corporis explicabo expedita. Id animi sit facilis. Debitis facilis vitae non maiores deleniti incidunt aut natus hic. Hic impedit autem ipsam debitis nam inventore quaerat. Harum sed repudiandae dolorem culpa. Laboriosam quaerat itaque velit cumque modi quam. Harum hic ipsa quaerat at veritatis. Velit deleniti nobis eligendi culpa quo. Vero sint quaerat eum doloribus nostrum qui impedit repudiandae. Magni fugiat placeat. Reprehenderit quisquam voluptatum. Suscipit et distinctio eaque consequatur quis cumque sequi. Fugit numquam minus distinctio quibusdam occaecati atque minus. Pariatur esse nesciunt. Amet deserunt tempore. Veritatis magni beatae dolores vel. Perspiciatis ullam saepe quas asperiores suscipit. Ad molestias commodi totam maxime numquam excepturi. Laborum vel debitis sit alias ipsa.

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