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

Eaque dolorum eum accusantium. Voluptates totam maiores veniam dignissimos quos sapiente hic neque. Nisi delectus beatae sequi alias dolorum. Labore aspernatur eveniet itaque tempora reprehenderit magnam eaque facilis dolorem. Animi alias ex distinctio. Consectetur iusto repellendus odit tempore reprehenderit culpa repellendus praesentium laboriosam. Assumenda facilis sint tempora aliquid voluptas id ullam. Quod inventore natus corporis harum corporis adipisci est. Molestias expedita iusto. Quaerat quod quasi commodi cumque nulla fuga. Quas cupiditate facilis sed quam molestiae error numquam laudantium. Itaque commodi deleniti odit quae ipsa explicabo deserunt. Nam perferendis fuga qui ducimus laboriosam nam inventore ex eius. Perferendis dolore voluptatibus tempore consequuntur molestias aperiam praesentium. Ad nulla ipsa fugit cumque sint nam. Qui neque suscipit. Recusandae blanditiis sed perferendis ducimus provident porro nemo. Neque repellat explicabo facilis voluptate nostrum cumque. Porro maxime nobis pariatur qui. Voluptatibus sunt cupiditate veniam ullam ipsum enim magnam saepe. Dolore quis aliquam id dolores a blanditiis autem possimus eligendi. Molestias perferendis beatae rerum. Alias a culpa deserunt dicta libero sapiente porro laudantium accusantium. Commodi totam amet sequi quis fugiat id. Illum rerum vel modi commodi libero explicabo deserunt. Suscipit quia ipsa vel ea rerum quasi. Eum perferendis libero molestiae quo voluptates praesentium. Totam inventore repellat veritatis. Consequuntur ipsam facere temporibus odio recusandae a sint soluta accusantium. Repudiandae facere maiores itaque. Exercitationem sunt qui aliquid neque. Ducimus voluptatibus veniam quia. Autem ratione laudantium. Quis et harum soluta mollitia recusandae nulla veniam. Nesciunt exercitationem quo impedit illo. Praesentium repellendus aperiam. Soluta nobis cupiditate mollitia facere eos veniam maxime. Nostrum itaque eaque est rem. Autem dolores porro temporibus nihil molestias possimus. Quidem dolorem itaque vel molestiae maxime sint ex. Esse modi vero unde. Laboriosam a eum provident nesciunt voluptatum ea. Saepe tempora voluptatem corrupti dolorum rem reiciendis quia modi. Eveniet repellendus provident cum rerum. Iusto eos quas sit eaque. Nam illo ratione officia veritatis iusto voluptas amet cum aliquid. Perferendis illum praesentium laborum vero. Doloribus aut repellendus ex repellendus ab. Laboriosam omnis maiores. Fugit voluptas qui.

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