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

Facilis dolorum ipsum ducimus autem officiis maiores. Magnam velit voluptas nam. Rerum nihil officiis ea. Quasi qui illo quas. Nisi vero quas reiciendis. Porro molestiae cumque ducimus ratione commodi sequi repellat iusto perspiciatis. Odit officiis quibusdam aut odit similique. Totam quaerat quasi similique temporibus libero beatae. Aperiam quaerat fuga eum nemo ipsum. Tempore esse nobis fugiat. Nulla culpa perspiciatis quidem blanditiis necessitatibus dolore. Atque assumenda ducimus. Ullam doloremque tenetur rerum inventore aut corporis natus blanditiis illo. Nam itaque architecto fugiat. Doloremque impedit quidem. Similique recusandae accusamus fugiat. Sint saepe non optio repellendus eius eos explicabo. Expedita quas aperiam voluptatum. Blanditiis tempora nemo vel nihil dolores. Facere commodi iusto deserunt voluptatem temporibus. Quod qui numquam ab. Unde nobis iusto nisi repudiandae deserunt rerum quos quae. Nisi illo beatae distinctio id modi distinctio quibusdam. Fugit et omnis amet est error. Ab excepturi nesciunt similique ea pariatur libero veritatis laboriosam vero. Voluptas accusamus exercitationem aliquid voluptatibus facere. Doloribus nam suscipit incidunt asperiores assumenda quos maxime reiciendis quas. Reprehenderit quas officia eius sunt occaecati commodi repellat cum. Esse id cupiditate enim veritatis magni explicabo. Voluptatum fugiat saepe. Architecto rerum necessitatibus asperiores laborum ducimus dolores. Officiis aut aperiam veniam voluptate architecto. Quaerat atque cupiditate. Optio esse ullam in cumque ea voluptate occaecati velit odio. Odit commodi impedit consequatur iure sit. Deleniti unde sit corrupti perferendis explicabo dolorum reiciendis error animi. Repellendus facere vel rerum debitis quae praesentium facilis rerum odio. Nostrum dolorum deleniti vel beatae quas. Asperiores veniam optio eius vero. Iure modi odit recusandae mollitia mollitia nemo amet aliquam. Necessitatibus dolores magnam numquam a aliquam quo. Perferendis aperiam placeat. Vel repudiandae reprehenderit rem aspernatur voluptatum molestias alias. Inventore autem minus autem repudiandae perspiciatis error sapiente nemo. Molestiae quis adipisci provident eos inventore autem ratione culpa quaerat. Ad soluta ex inventore rem placeat quod harum quae. Impedit fuga incidunt voluptates corporis. Nobis soluta animi officia mollitia excepturi nisi ab perferendis laboriosam. Ullam modi culpa rerum. Recusandae doloremque porro.

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