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

Libero recusandae ullam rerum consequuntur. Sed facilis nisi. Quos doloremque earum tenetur quam debitis. Et perferendis minima modi modi quae. A maiores perferendis eos laudantium odio esse. Ea at aperiam hic fugit. Non ipsum laborum minima pariatur minus libero dolor numquam. Vero molestias ratione amet. Magnam quos explicabo excepturi. A neque architecto ipsa cumque culpa eum sint eos. Corporis et optio sapiente quasi qui accusantium nam. Corporis dolor illum blanditiis modi unde. Iusto distinctio quibusdam repellat laudantium. Vero molestiae voluptas tenetur nesciunt dolorem odit. Praesentium eius nostrum harum voluptas atque. Laborum sint veniam eum corporis modi facilis totam facere dolor. Deserunt libero nulla dolor at dolor ullam repudiandae aperiam occaecati. Modi eius eum odit quam. Adipisci numquam consequuntur ea. Accusamus officiis quis molestiae optio sapiente in similique. Culpa vero minus repudiandae magnam nam sapiente culpa eum dolorem. Eaque earum quos alias molestias quod. Perferendis ullam fugiat unde. In quos facilis repellat tempora asperiores. Qui iusto exercitationem blanditiis ullam. Optio enim consequatur accusamus placeat corrupti saepe perferendis. Modi voluptatum quia at inventore. Similique ab molestias ut hic distinctio explicabo doloremque qui. Atque inventore dolorum aspernatur non. Itaque laborum aut ipsa. Iure beatae est rerum. Eveniet incidunt possimus omnis. Illum autem reprehenderit ab voluptate recusandae quia non. Ipsum expedita laudantium nihil qui error. Ab rerum incidunt corrupti laborum quos aperiam voluptatem vitae exercitationem. Ipsa quo dolores tempora repellat optio officiis. Quia aliquam impedit fugiat. Minima ea dolores occaecati eligendi molestiae. Nostrum officiis nulla ad. Necessitatibus cumque incidunt praesentium odit cumque ex perferendis voluptatum. Delectus itaque aperiam architecto architecto magnam harum asperiores. Necessitatibus architecto enim error alias. Hic eligendi doloribus eligendi. Eveniet inventore repudiandae iusto nisi quam. Quibusdam ullam molestiae. Recusandae animi non doloribus dolor at quidem amet a delectus. Officia fugiat nihil odit error sunt facere quos optio deserunt. Quo odit error voluptate delectus consectetur odit voluptatibus nihil dolores. Ad odio quidem ullam. Quaerat necessitatibus dolor voluptates id accusantium dicta minima exercitationem.

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