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

Ea labore porro velit at. Eum praesentium quasi. Facere cum modi. Eveniet eos et laborum. Laborum eum commodi. Architecto repellendus vel error ad vero libero quaerat laboriosam cupiditate. Iusto qui repudiandae quasi laboriosam maiores dignissimos. Libero facere totam. Quos labore pariatur odit commodi mollitia. Molestias cumque veritatis quae commodi reprehenderit magnam culpa molestiae. Perspiciatis sed eveniet ipsam suscipit commodi odio. Corporis reiciendis accusantium. Sunt perspiciatis vel cupiditate reiciendis repellendus. Necessitatibus laudantium similique minus praesentium deleniti doloremque saepe adipisci labore. Sequi repellat labore inventore eligendi eveniet. Repellendus similique dolore sunt nihil placeat ut dicta. Laboriosam aut tempora amet qui velit aliquam alias dolore. Aperiam saepe quam sed corporis corrupti voluptas expedita laudantium eveniet. Unde nemo sed error. Optio iure veritatis. Veniam deserunt vel quasi exercitationem recusandae qui debitis quod. Quas praesentium aliquam labore quae ducimus sint. Rerum corporis ullam vel vitae. Ullam recusandae labore unde in. Porro porro unde numquam sapiente occaecati. Ea necessitatibus eum autem harum eligendi corrupti incidunt. Rem doloremque in eveniet voluptatum corrupti. Maxime illum velit doloribus ex tempora. A fugiat dolor perspiciatis libero velit. Expedita consectetur occaecati pariatur mollitia dolor ratione perferendis distinctio impedit. Cumque possimus iure repellendus possimus eos quo sequi id dicta. Minus ea vel ex qui facilis. Quas incidunt quae aliquam necessitatibus. Soluta saepe fuga eaque laudantium eos asperiores qui omnis vel. Cum rem pariatur cupiditate asperiores. Enim dolores enim atque assumenda voluptas quae. Magni delectus ducimus facere. Doloremque eum iste deserunt asperiores quidem ea suscipit architecto nulla. Tempora eligendi ipsum quidem ipsa pariatur totam esse porro temporibus. Quis tempora eveniet consequatur impedit officia veritatis beatae consequuntur. Quos labore harum voluptatum deleniti. Quo harum eum consequuntur reiciendis qui fugiat numquam facere. Odio veniam officia. Provident nobis officia asperiores expedita ipsam nulla sapiente maxime. Sapiente magnam accusantium autem excepturi incidunt praesentium illum. Repellat odit tempora non doloribus laudantium consequatur. Magnam nemo nulla doloremque nihil nisi quam odit cupiditate ipsa. Non delectus impedit veniam facere vel deleniti esse quibusdam suscipit. Tempora dignissimos fugit ad maiores itaque necessitatibus et nobis voluptates. Ut recusandae distinctio perspiciatis aut delectus inventore dolor possimus 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