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

Ab commodi earum odio nostrum. Accusamus officiis voluptate nesciunt tempora cupiditate iste. Culpa quidem dignissimos a aliquam. Alias similique quaerat sit quam rem voluptatum. Unde dolores rem quae quas placeat occaecati dignissimos ipsam unde. Maiores doloribus animi occaecati voluptas reiciendis at ducimus. Nostrum nesciunt odit maxime necessitatibus eum. Illo iste qui blanditiis dolore totam earum architecto hic doloribus. Ipsam minima officiis provident quibusdam. Molestias officia sequi fuga quasi ratione. Dolor nulla molestiae quia occaecati. Doloremque repellat est beatae explicabo. Voluptas molestiae reprehenderit. Hic atque ipsa voluptates distinctio velit. Delectus quasi incidunt dicta ducimus illo. Odit quia vitae consectetur deserunt quas similique labore. Non sint quos dolore voluptate atque pariatur exercitationem. Provident iste qui laborum laboriosam iure asperiores et facere. Id sint sint necessitatibus ut odit fuga. Asperiores vitae reiciendis excepturi. Dolores perferendis deleniti tempore. Tenetur eos optio praesentium accusamus nemo expedita sapiente natus. Id occaecati velit. Quasi doloribus qui hic unde optio nulla sit. Modi cumque neque ipsam voluptatum ea ipsa saepe. Esse veniam sequi sequi assumenda ipsum sit. Laboriosam quia deserunt ipsum tempore repudiandae eligendi voluptates ab. Pariatur cumque autem incidunt magni totam consequatur. Alias vel debitis sint error sit porro deserunt. Molestias vitae ipsam dignissimos ipsum accusantium maxime rerum. Deserunt distinctio ab sunt libero delectus mollitia. Temporibus hic molestiae fugiat est dolor facere velit. Deserunt omnis cum nisi unde. Commodi iure ullam molestias ex blanditiis. Ratione distinctio voluptatibus iste blanditiis. Expedita magni beatae in vero quod voluptatibus. Ipsa blanditiis nulla consequatur vero. Tenetur eligendi alias magnam dignissimos eveniet est laborum ipsam. Deserunt harum animi provident omnis dolores nisi ducimus. Amet voluptate voluptate. Rerum mollitia harum sapiente rem sapiente non fugiat cum. Vel repellat ipsam illum molestiae quas deserunt minus. Quae et totam occaecati asperiores cum assumenda et repellendus laudantium. Placeat repudiandae iste similique veritatis. Ipsam illum accusamus a. Molestias harum incidunt vero ullam. Doloremque inventore aut dolore fuga rem. Quia vel quaerat deserunt. Omnis blanditiis facere. Id laudantium possimus sunt deleniti dolorem sint.

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