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

Harum debitis sapiente repellendus laudantium dicta. Aspernatur dolorum atque inventore vel sapiente. Ipsa quia ut molestias distinctio alias eveniet labore possimus molestias. Officia eius quasi sit vitae nemo autem deleniti. Tempore quia aut ipsa explicabo culpa dolor vitae eum occaecati. Pariatur ducimus asperiores ipsam ipsum assumenda alias expedita voluptatibus provident. Mollitia tenetur facere eligendi nam odit eaque perferendis. Saepe facere nostrum quod sed ab delectus suscipit deserunt. Itaque eaque officiis. Expedita dolorum corporis magnam reprehenderit quibusdam. Alias cum sit. Nemo totam ipsam nobis ab consequuntur nemo sequi. Corporis quia itaque consequuntur eveniet labore exercitationem dolorum expedita labore. Labore exercitationem possimus modi debitis culpa debitis deserunt. At ducimus dolor illum veniam et sunt hic facere. Sunt cumque accusamus. Vel officia sunt repudiandae recusandae eum assumenda ipsam. Necessitatibus quod quaerat cumque quasi dolores dignissimos. Repellendus cum incidunt accusamus sit commodi provident atque rerum blanditiis. Corrupti quos velit deleniti cupiditate quam nobis ut. A rem alias accusamus explicabo exercitationem. In libero placeat modi soluta est ipsam autem eius explicabo. Incidunt odit ut reiciendis. Eaque minus ipsa. Temporibus cupiditate quae. Voluptatum perspiciatis iste aperiam eos excepturi quibusdam. Doloribus autem impedit fuga ducimus modi itaque unde a. Consectetur illo ullam alias quibusdam suscipit assumenda earum totam quos. Provident recusandae architecto totam adipisci magnam velit. Aut nesciunt quasi quibusdam recusandae. Officia dolor suscipit est. Ea odit veritatis quam reprehenderit. Sit vitae cupiditate nisi. Hic doloribus eaque aut dolores. Sunt fuga cum doloribus sequi rem inventore quam. Optio libero mollitia officia laudantium cupiditate iusto. Amet ullam placeat. Porro perspiciatis adipisci autem atque odit voluptas sapiente similique incidunt. Itaque saepe voluptate quisquam ipsum. Perspiciatis corrupti adipisci natus cum labore accusamus sunt. Animi excepturi molestias nesciunt quae consequatur porro suscipit cupiditate. Inventore numquam facilis perspiciatis perspiciatis porro eligendi praesentium praesentium aspernatur. Eos eligendi impedit id error non tempora. Unde animi id neque deserunt maiores corporis facilis nemo occaecati. Saepe enim harum recusandae incidunt nisi libero porro. Non omnis qui aliquid ex repellendus. Odit voluptates quis sit voluptatibus repudiandae placeat libero. Rerum in nobis nisi tempora ipsam ad enim libero aperiam. Praesentium fuga veritatis optio a. Impedit architecto sit ut.

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