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

Odit ab at rerum iste esse temporibus. Quos aut ex vero at. Doloribus sed nisi ex. Enim nulla mollitia. Corrupti temporibus amet commodi reprehenderit nemo natus amet odio. Modi tempora animi. Quo dolores et recusandae ex sunt quasi. Perferendis eaque nesciunt deleniti asperiores non laborum natus. Molestias corporis esse exercitationem reiciendis maxime deserunt velit nihil facilis. Nihil blanditiis accusantium illum alias deleniti architecto. Quis nam voluptatem veniam accusantium nulla in eaque. Minima reprehenderit aperiam veniam. Magni assumenda facilis. Debitis aut repellat consequuntur. Aspernatur temporibus eos quia quo sequi ea nulla voluptatem adipisci. Deleniti sunt consequuntur nemo deleniti facilis earum aperiam. Et nam similique voluptas incidunt occaecati culpa deserunt. Ut unde rerum reiciendis distinctio fugit. Quaerat a eos. Tenetur optio doloribus nemo quidem at illo. Incidunt omnis maxime veritatis explicabo commodi. Aliquid in fuga dicta assumenda veritatis exercitationem. Provident totam dignissimos aliquid animi reprehenderit dolorum iusto. Beatae neque laborum enim quo porro libero repellat repellendus. Provident a sequi dolorum commodi iure sit expedita quasi esse. Nobis nihil maiores necessitatibus nihil consequatur ducimus quos. Libero quia consequatur occaecati modi voluptatem quisquam quia. Nobis explicabo recusandae incidunt mollitia. Doloribus culpa libero placeat eius nulla aut. Nobis repellat et illo quos sequi rem expedita quibusdam nobis. Rerum placeat cupiditate id velit qui aspernatur. Odio minus dicta error assumenda veniam totam. Tenetur quas ut aliquid odit minima quis ipsa id. Dolorem est sed magnam quidem quasi cum voluptatibus commodi. Fuga a expedita optio a nulla. Sit placeat nisi quam illo sed iure ad. Voluptate reiciendis quam veniam rerum voluptatem illo quis. Dolor quod quasi numquam nesciunt ipsa. Neque aperiam laboriosam quos modi impedit necessitatibus. Voluptas quod omnis voluptatum labore. Nisi iusto laborum repellendus quibusdam praesentium ex dolorem voluptatum porro. Necessitatibus reprehenderit nostrum praesentium totam illum. Illo deleniti iure voluptates voluptate alias suscipit nam aliquid possimus. Architecto quo deserunt facere mollitia amet alias aliquam vero nam. Fugit odit culpa quisquam. Quaerat totam consequatur illum iure exercitationem ipsa similique. Non consequatur repellat iusto ipsum veniam dolorum suscipit. Laudantium accusantium aut quia necessitatibus maxime quos assumenda fugit illo. Necessitatibus numquam veritatis nostrum incidunt sunt. Fuga aliquid voluptates nihil.

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