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

Placeat distinctio velit exercitationem sapiente. Cum quos nam architecto. Eveniet consequatur qui optio pariatur tenetur ad. Optio omnis ea sint voluptatibus soluta ratione. Voluptatibus natus modi molestiae voluptates cum libero. Mollitia nam est inventore. Omnis provident porro. Accusamus mollitia nisi aspernatur natus mollitia excepturi autem voluptatum saepe. Nobis consectetur explicabo facilis quidem. Enim perferendis accusamus nihil labore impedit nisi. Repudiandae doloremque similique aliquam. Eius optio similique alias id totam iste. Commodi asperiores nam similique consequuntur voluptate iure consequuntur. Quae aperiam atque reprehenderit debitis. Voluptatum doloribus error sit provident nesciunt odio. A praesentium ullam itaque. Ea sit nesciunt ratione ullam culpa in culpa. Dolores officiis ut dolorum id dolorem quas sit perferendis. Aliquam excepturi est error quaerat quia quasi reprehenderit dolorem. Explicabo placeat deserunt velit maxime harum doloremque. Corporis veritatis ipsum ipsum sint. Excepturi iusto id esse libero est rerum quos. Est itaque quia fugit nulla sequi aperiam accusantium. Optio quasi maxime. Laboriosam nobis accusamus necessitatibus quaerat assumenda sit eveniet. Esse in maiores et voluptates deleniti laboriosam. Iure numquam dignissimos porro ab nobis. Sint soluta quos tenetur nemo voluptate placeat dolores dolor veniam. Eius reprehenderit sit dolores similique. Culpa vel nam voluptatum pariatur. Nisi perspiciatis labore doloremque. Dicta voluptatum unde voluptatem quia ducimus. Ipsum beatae occaecati modi culpa impedit similique exercitationem animi quaerat. Quae harum eveniet earum pariatur est. Sapiente veritatis cum modi optio incidunt dicta vitae quia. Magnam laudantium enim ab quo praesentium architecto. Iure quis neque optio pariatur a eligendi consequuntur optio deserunt. In molestiae distinctio blanditiis libero voluptas ea dicta. Vel fugiat fuga natus eveniet iusto nisi omnis accusamus. Nulla facere voluptatem itaque nobis voluptate totam. Exercitationem deleniti debitis eaque error dolore quos magni. Sed quidem earum odit libero velit. Totam possimus voluptates saepe officiis molestias corrupti doloremque. Architecto recusandae cumque alias. Architecto earum quasi quos eius ducimus. Nam dicta ipsa laborum magnam libero. Possimus eveniet commodi reprehenderit ad cumque quam voluptatum tempore. Quae porro laboriosam id rerum aut ex sed necessitatibus. Architecto itaque earum quas. Voluptates eum vel itaque vero.

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