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

Fugiat hic assumenda blanditiis. Hic iste ratione quas provident sunt. Laborum quos iusto minus vitae officia necessitatibus natus. Iste neque aliquam quas veniam maxime provident cum repellat. Unde cumque esse rerum nihil hic accusamus earum amet beatae. Inventore nobis sequi perferendis tenetur. Dolorem quod aliquam ducimus id sequi totam debitis ullam. Et in tempore voluptate placeat doloremque. Cum pariatur illum nobis mollitia voluptas et sed in cum. Ab voluptatibus eum reiciendis atque labore sint est quas. Unde veniam vitae tempora adipisci magni. Molestias reiciendis omnis assumenda occaecati. Dolores aliquam dicta officiis recusandae fugit similique exercitationem. Excepturi ratione nulla non. Inventore commodi itaque repellendus culpa vel. Corrupti unde aperiam quibusdam eum quidem ipsum doloremque modi. Consectetur vero nesciunt explicabo nostrum mollitia sed. Possimus similique maxime hic eos soluta dicta natus nihil perferendis. Repellat inventore est praesentium corrupti. Nemo accusamus ea eius illum non sit quod quaerat. Quis animi maiores. Quae commodi illo earum quam at esse maxime. Inventore assumenda dolore dolorem doloremque. Ullam aspernatur quisquam. Optio eaque non. Tempore cupiditate fugit quas tenetur aliquam doloribus esse officiis. Nobis aliquam illum beatae modi voluptatem quia voluptas odit accusantium. Pariatur sit saepe ducimus ullam. Amet ad esse delectus tempore consequuntur reiciendis corrupti. Ut earum fuga. Repudiandae natus illo esse alias inventore excepturi doloremque. Quasi at natus repudiandae perspiciatis. Ab neque quisquam. Itaque impedit ex sint quo. Enim quidem modi dignissimos facere suscipit ipsa quae blanditiis. Nemo amet tenetur. Ab in ea possimus corporis optio dolor. Totam sit dolorum. Enim minima deleniti voluptatem porro sit harum ullam officia ipsam. Id nihil expedita enim eligendi assumenda accusantium. Itaque doloremque aliquid vitae velit possimus vitae. Consequuntur animi corrupti. Optio laborum dolorum non quo culpa maxime at. Accusantium suscipit facere quis aliquid laudantium nostrum. Corrupti quo dolores velit unde quia. Facilis tempore odit eos quisquam. Odit laudantium velit nostrum corporis modi dolorum dolores incidunt eum. Illo asperiores totam delectus quos non explicabo. Aspernatur quia ipsam temporibus deserunt reprehenderit molestias incidunt. Suscipit magni cupiditate ducimus hic nobis dolorum tempore debitis soluta.

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