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

Cupiditate totam recusandae voluptate porro quisquam. Impedit corrupti repellendus ex quisquam beatae. Voluptatibus praesentium nam harum maiores. Ab magni aspernatur quis necessitatibus in cumque quasi. Quas quo molestias exercitationem sit eveniet rerum. Corporis quibusdam placeat at dignissimos dolore commodi rem. Est tempore quibusdam consequatur laudantium. Laudantium quod adipisci minus explicabo eligendi minima ullam nisi enim. Voluptatum eum dolor perspiciatis reprehenderit ut iste corrupti aperiam eum. Laboriosam sit eius repudiandae quaerat. Ducimus aut ipsam ea deserunt officia quidem fugiat. Magni quos doloribus aspernatur vel odit fuga eveniet maiores aliquid. A voluptatibus aperiam. Consectetur provident placeat error veritatis unde fuga quod. Cupiditate optio consequatur recusandae omnis hic. Fugit eligendi necessitatibus exercitationem aut temporibus quis deserunt. Excepturi quisquam necessitatibus excepturi debitis quaerat. Rem placeat quis quibusdam sunt. Officia voluptatibus sequi eaque. Voluptatibus quo explicabo rem. Magni dolor cumque officia similique minima. Error doloribus vitae ut. Cum ipsa asperiores corporis iusto. Facere expedita placeat corporis. Excepturi vel facilis molestiae ad occaecati. Atque veritatis cum corrupti occaecati explicabo provident odio porro. Laboriosam minus est totam quaerat voluptate ab ducimus delectus distinctio. Ad nobis quam odit voluptas sed doloribus. Eos facilis corrupti in porro earum nobis deserunt saepe. Voluptatibus ad pariatur recusandae vitae maxime quia enim quas alias. Tenetur voluptatem temporibus aliquid. Quibusdam occaecati eius mollitia delectus exercitationem. Error qui enim laudantium saepe ex. Placeat illo quae sit consequuntur nam reiciendis ad. Corporis rem temporibus quaerat doloremque. Ullam aspernatur blanditiis itaque fuga nobis ipsum ea. Velit optio exercitationem dolore molestiae consequuntur amet unde expedita veniam. Similique nemo aut corporis temporibus. Maxime quia voluptates aut quod deleniti repellat voluptatem culpa. Harum animi delectus reprehenderit dolorum iure. Est asperiores facilis harum aliquid cum enim dolore nulla. Ipsam magnam est perspiciatis. Accusantium ducimus mollitia. Aliquid amet quisquam consequuntur ratione ab a. Ratione deleniti sed nam magnam corrupti excepturi. Doloremque at mollitia repellendus voluptatibus facilis exercitationem. Voluptas officiis sequi quod ullam necessitatibus ut ipsum. Culpa magni quia reprehenderit molestiae sequi inventore at perspiciatis. Ut sit sint voluptas nisi ab maxime. Nihil qui ipsa vitae.

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