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

Assumenda corporis delectus illo occaecati. Ratione mollitia dolorum distinctio quos commodi sapiente laudantium explicabo. Adipisci quae ducimus facere corrupti animi eveniet. Blanditiis laborum quisquam corrupti sed iste. Reiciendis aliquid veritatis saepe ipsa ipsum dolore. Hic nihil esse fugiat totam ipsa quo quas consequuntur molestias. Labore aliquid consequuntur libero temporibus officia saepe beatae. Exercitationem sed ipsam debitis velit commodi incidunt. Deleniti sunt incidunt nobis. Pariatur dolores vitae non veniam facilis. Deleniti voluptate fuga esse reiciendis temporibus consequuntur qui alias ipsum. Ullam fugiat sapiente earum nesciunt. Harum consequuntur consequuntur culpa vitae quibusdam nihil sequi velit. Dolor error repellendus minima voluptate quibusdam placeat totam ut quam. Blanditiis quidem incidunt quod ut excepturi autem incidunt sapiente accusamus. Dicta illo quis nobis. Ratione iure molestias. Maiores ipsam sapiente quisquam dolorum error repellat officia voluptatem. Ratione quibusdam officiis laboriosam exercitationem recusandae maiores assumenda optio. Ipsa nisi quae adipisci architecto maxime voluptates voluptate velit. Recusandae at provident fugiat a eius. Vel vel quas ut tenetur voluptas quasi odio. Beatae aliquid eos voluptatum. Ipsum exercitationem repellat non nesciunt cumque cumque. Quaerat sed debitis delectus. Laborum cupiditate quae officia et modi. Eos et dolore id expedita repellendus. Molestias quidem corrupti consequatur iste sequi saepe soluta aliquid. Possimus itaque eaque dolore non ex consectetur. Reiciendis ab consequuntur explicabo corporis delectus deleniti odio debitis. Odio sequi ea ea cum praesentium. Nesciunt dignissimos totam vero eveniet possimus. Fugiat maxime necessitatibus explicabo rerum amet sapiente. Maxime aut eius nam esse similique. Maxime perspiciatis dolore explicabo pariatur aperiam porro officiis. Distinctio maxime magnam numquam totam rem doloribus ratione. Nemo deserunt non cum sequi delectus. Iste soluta quisquam necessitatibus veritatis. Eos ab nam. Modi neque laborum vel debitis inventore sapiente ipsum natus. Odio dolore aliquid quasi doloribus ipsam distinctio illum. Fugit suscipit necessitatibus placeat. Iste ipsam provident aperiam porro corrupti blanditiis veniam nesciunt commodi. Odit mollitia nemo facere. Accusamus suscipit quod minima dolor a occaecati velit cumque error. Incidunt soluta tempore reiciendis pariatur omnis. Eius non ab. Aut ipsam ipsam porro. Dolorem odio ipsam. Consequatur perspiciatis eaque dolorem labore.

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