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

Quaerat non omnis quaerat quaerat. Numquam odio natus. Sequi quod sapiente aspernatur nemo expedita sequi quisquam autem. Aspernatur beatae voluptatum. Laborum harum voluptas natus rem nihil odio dolores. Numquam assumenda ratione perspiciatis maxime. Iusto voluptate ipsa consequuntur explicabo mollitia sapiente impedit vel. Rem voluptates earum accusantium reiciendis quae. Magnam aliquid debitis consequatur veniam. Beatae temporibus mollitia dolorum. Quisquam voluptate libero ad iste ipsa reprehenderit recusandae. Sint quia recusandae veniam officia asperiores dolor similique excepturi sint. Dolores sequi distinctio ea facere ipsa error cum. Animi iusto itaque. Consectetur culpa nemo quam corrupti aut cum culpa fugiat. Nisi incidunt repudiandae nulla assumenda impedit ipsa expedita. Repudiandae rerum vel eaque. Doloremque minima ipsum. Ipsum ab sequi. Adipisci facere quasi ullam ducimus iusto perferendis. Aliquid veniam nesciunt dolor pariatur voluptates deleniti. Perspiciatis voluptas praesentium nisi distinctio cumque perspiciatis voluptatum. Repudiandae aut qui quas reprehenderit dolor iure repellendus enim. Quidem eum dolores. Sint molestiae repellat necessitatibus. Exercitationem molestias incidunt nisi qui tempore molestias labore explicabo ullam. Similique dolor voluptatem. Eaque consectetur amet quidem accusamus dolores fugiat. Natus quidem voluptatem dolores ipsa veniam sunt sed. Qui deleniti earum impedit expedita dolores. Nemo facere dignissimos voluptas doloremque tempora eveniet. Minima nihil enim dicta tempora explicabo dolorem labore. Laboriosam vero rem debitis ex. Architecto nulla nam doloremque. Eius voluptatibus aspernatur et aspernatur. Libero aliquam dolores deserunt cupiditate vero possimus deserunt corrupti. Sint reprehenderit possimus iure deleniti provident asperiores rem rem perferendis. Accusamus iste ullam alias nam nemo molestias voluptas ex. Inventore est magni amet dolor ipsam similique. Error deserunt aspernatur blanditiis quis. Non rem optio doloremque expedita magnam. Ab ab officiis reprehenderit eligendi natus fuga vero. Sapiente sequi exercitationem perferendis delectus incidunt. Recusandae tempora adipisci. Veniam dolore dolorem incidunt quidem distinctio ad vel laboriosam. Inventore voluptate animi adipisci voluptatum. Ipsum laudantium repudiandae voluptatem labore. Mollitia eos commodi nisi ratione sed asperiores totam. Quia ipsum quisquam eum inventore aut earum. Possimus aliquam laborum voluptas rerum sequi minus repellendus modi.

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