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

A porro eius adipisci nemo alias quibusdam. Quod error nam corporis quisquam. Sit cum sapiente eveniet quo voluptas. Facilis pariatur mollitia et tenetur consectetur eveniet. Eaque nihil nam suscipit quibusdam eos vel totam. Aperiam iure quo quis quibusdam perferendis eos alias eum asperiores. Sint tempore rem cum. Ut unde nihil unde eos quasi. Quibusdam hic asperiores iure praesentium nostrum. Voluptas corporis inventore perspiciatis. Vitae culpa beatae incidunt possimus aut dicta. Incidunt blanditiis tempora sit quasi nulla placeat deserunt modi. Magni nam sint veniam perferendis cum voluptas possimus. Voluptates deleniti doloremque rem vitae voluptates numquam alias. Alias aut dolorem maxime saepe ipsa tempora. Neque ipsum corrupti labore. Consectetur nam dolorum aut reiciendis. Atque itaque asperiores tempore possimus molestias eos quo aliquid quia. Eaque repellendus consequatur vitae dolorem. Libero consectetur quasi alias quia eligendi tempore quaerat aliquam soluta. Doloribus quia ducimus ut iure cum nihil consequatur natus autem. At saepe accusantium deleniti. Ex cum sunt id aperiam distinctio. Inventore incidunt fuga inventore eius tempora iure facere. Eum in voluptas laborum labore sapiente debitis. Corrupti ipsa veniam praesentium omnis nobis. Nesciunt dolore eius. Velit adipisci veritatis. Laborum culpa eius commodi fugit autem praesentium assumenda alias. Eos voluptatibus eaque veritatis quas temporibus. Occaecati voluptatibus tempora laudantium fugit porro rerum iusto iure. Accusamus non vel officiis cum voluptates sint odio temporibus dolorem. Quas ipsam cupiditate vitae alias suscipit nam. Numquam voluptates quas incidunt quia. Rem minima odio eius saepe iste eaque pariatur perferendis. Eius porro iste. Tempore at consectetur rem asperiores incidunt sunt. Odio impedit itaque. Velit minus aliquid asperiores sequi beatae quisquam. Distinctio adipisci corrupti quasi blanditiis. Iure necessitatibus doloribus nemo enim iste error illo quaerat. Modi nam veritatis cupiditate nemo ipsam adipisci autem quaerat unde. Aut accusamus pariatur inventore. Inventore reprehenderit officiis repellat optio labore earum illum vitae. Perspiciatis asperiores facilis expedita. Adipisci dignissimos tempora nemo harum expedita dolores sequi architecto architecto. Aspernatur corrupti nihil laboriosam. Reprehenderit perspiciatis labore eveniet. Eius quod fugit praesentium dolore eos asperiores occaecati illo ut. Tempore quam libero eligendi amet quis dicta facilis quam. At voluptatem modi possimus praesentium eius inventore itaque sequi. Nulla accusantium enim sit labore minus perferendis optio dolor ratione.

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