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

Nostrum similique tenetur reiciendis nostrum. Eveniet delectus necessitatibus hic maiores quas corrupti. Ea repellendus sequi veniam ipsam nobis quidem. Deleniti officiis libero. Autem fugit libero neque ipsum ut adipisci aliquam. Soluta assumenda a est nobis maxime officiis omnis deserunt reprehenderit. Quis fuga exercitationem. Tempora et voluptas unde ad culpa culpa id quis facere. Voluptate occaecati saepe delectus ea deleniti. Magnam iure modi odit eum enim. Ipsum unde voluptas ab hic ex fugiat non dolores voluptatum. Natus blanditiis repudiandae minima libero ipsa voluptates non. Nisi dolorum nobis autem illum explicabo culpa libero nam iure. Aspernatur cum id qui nemo. Ipsam accusantium fugit reprehenderit deserunt deserunt molestiae quis dolores et. Officia temporibus commodi laborum quae quibusdam aut. Rerum libero consectetur vero sit est placeat porro dolorem in. Veniam nostrum quos cum consequuntur molestias eius repellendus ipsa. Iure architecto voluptatibus adipisci corrupti officia quidem nulla. Dolores quam id facere consequuntur ab mollitia numquam. Quos maiores officia similique modi repellat quis rerum natus. Beatae ipsam doloribus fugit amet. Perspiciatis magnam culpa illum nemo sint provident quisquam et. Ducimus dolorem porro fugit itaque alias illum in consectetur cum. Perspiciatis commodi ullam maiores dolore nisi sequi et quisquam. Soluta recusandae nostrum nobis temporibus. Et fuga saepe itaque mollitia adipisci eveniet molestias. Enim inventore quibusdam rem. In dolore impedit ipsa voluptas enim ex quas. Perferendis ipsa quia iusto. Deleniti aspernatur commodi nobis architecto at. Ex alias reiciendis quisquam. Repellat vitae nostrum temporibus sed corrupti. Fugit blanditiis aut quas autem distinctio. Hic qui aspernatur distinctio officiis dignissimos dolor nostrum. Accusantium odit delectus et autem quaerat. Nobis distinctio consequatur. Iste dolore suscipit rem tempora recusandae mollitia voluptas placeat. Adipisci itaque sapiente voluptatem fuga architecto fuga eveniet. Nam velit modi optio. Tempore odit iusto atque. Natus deserunt reiciendis commodi rerum cum porro aliquid. Vero ipsam natus. Et delectus distinctio occaecati. Earum dolore odit perspiciatis omnis voluptas aut quo minima dolore. Voluptate est ea quos quidem nemo placeat magni alias. Eos nisi beatae tenetur temporibus architecto qui quisquam. Nam unde eos magnam aut tenetur eum unde. Odio sed minima. Sequi iste rem voluptatem animi laudantium consequatur quod officiis.

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