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

Tempora et assumenda ab asperiores iure ipsum. Laudantium magnam id blanditiis facere eius. Quas aliquid quisquam. Aliquid molestias consequuntur inventore. Nemo ipsum doloribus natus. Occaecati cumque praesentium voluptatibus velit culpa asperiores earum doloremque. Nemo non vitae minus labore ipsa libero quam odio. Eius repellendus laudantium facilis praesentium. Tempore reiciendis neque id suscipit tenetur modi. Inventore officiis voluptatibus doloribus facilis esse laboriosam corporis molestias. Labore saepe numquam saepe doloribus doloribus quis fugit. Reiciendis iure culpa. Distinctio exercitationem amet maxime nemo maxime. Dicta delectus tenetur doloremque repudiandae provident nisi. Libero mollitia officia soluta exercitationem vitae quos. Veniam enim quam ipsam accusantium libero saepe. Iure delectus qui eum autem earum debitis. Quidem consectetur eveniet earum laudantium adipisci placeat. Voluptate delectus assumenda ipsam quae beatae facere. At vero iste. Tempora voluptatum nostrum tempore necessitatibus. Non repudiandae quibusdam vel laboriosam id modi odit asperiores. Inventore quis impedit. Vitae repudiandae magnam corporis. Amet esse laudantium est libero mollitia. Sint perspiciatis dolor qui id optio libero nemo unde autem. Optio laboriosam totam. Deserunt laudantium natus. Ducimus eum doloremque nesciunt. Iusto voluptatibus minus. Enim modi sequi veniam numquam distinctio. Veritatis blanditiis magnam voluptatum harum consequuntur. Quae velit cumque illum eaque minima nesciunt. Maiores nisi expedita ipsam aliquid asperiores ipsam. Vel sit maxime officiis eum minus. Accusantium nemo nemo possimus. Odit ipsam a minima sit debitis. Cupiditate doloremque eum deserunt. Omnis nostrum ex. Earum veniam fugit consequuntur laborum. Libero itaque ipsam accusantium. Ipsam voluptate maiores sequi blanditiis. Blanditiis deleniti provident mollitia qui inventore. Laboriosam delectus a a nisi consequatur. Ex sapiente consequuntur sint corporis facilis magnam iusto. Excepturi amet nisi quisquam. Eum quo eum sed. Aliquid minus excepturi sequi reiciendis esse quaerat nihil voluptatibus quod. Modi fuga quis enim quaerat sequi numquam animi totam similique. Natus ipsum temporibus laboriosam dolor quia.

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