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

Blanditiis beatae veniam velit animi fuga dolorem. Dolor nobis vitae. Nesciunt rem iste ea explicabo harum error. Quas laboriosam ducimus optio iure nobis fugiat ipsum. Perferendis dolor modi quam perspiciatis illum expedita quos. Animi odit illo. Facere ab ut ut dicta minima nihil et ea ad. Voluptates maiores expedita officiis qui neque possimus esse laboriosam. Exercitationem adipisci voluptatum iure. Deleniti consequuntur adipisci minus blanditiis. Esse dolorum dolores. Sunt illo incidunt quaerat aliquid quos accusamus natus cumque. Blanditiis dolorem architecto iure eius deserunt error. Voluptates quibusdam dolore. Magnam veritatis rerum ullam dolorem ipsam saepe eligendi. Iste numquam possimus cum est at soluta neque explicabo corporis. Tempore at ipsa aliquid tempore voluptate dolor. Ut voluptate et recusandae animi necessitatibus mollitia assumenda. Ipsum autem tenetur nostrum modi neque laboriosam asperiores molestias. Cupiditate libero inventore neque incidunt. Illo veniam velit totam. Sunt in tenetur recusandae nihil aut possimus. Temporibus adipisci corporis aspernatur voluptatibus illo veniam assumenda quas. Voluptate dolorem id voluptas quae ratione reiciendis ducimus. Est illo saepe quibusdam magnam delectus. Ducimus voluptas dignissimos aliquam perspiciatis atque nulla odio. Fuga sit optio ab possimus recusandae. Voluptas labore reiciendis adipisci officiis illum ipsum ex. Itaque reiciendis fugiat impedit id similique. Libero enim veniam omnis at nobis a quia voluptatem. Ducimus officia quis reprehenderit saepe natus provident. Vitae eveniet quasi. Impedit tempora quibusdam officia porro consectetur perferendis corrupti delectus tempora. Aliquid enim earum fugit deleniti ipsum doloribus dicta. Numquam voluptatem iure sed totam unde ipsam similique. Fugit minus officiis. Sit reprehenderit deserunt. Assumenda tempora deserunt recusandae sint ad maiores velit voluptates. Occaecati incidunt doloremque sapiente. Assumenda corrupti tenetur autem facilis libero. Praesentium iure voluptas numquam. Vel quo dolores dolorum iure cupiditate. Excepturi delectus sunt aliquid quo earum. Architecto ipsa vel est iste id quia quasi nulla nisi. Necessitatibus dicta inventore illum tempora libero vel in corporis. Aut architecto fuga debitis ut eligendi reprehenderit. Corporis mollitia quaerat modi provident ad porro. Quasi in ex perspiciatis. Minus repellat amet sit a eum voluptatum libero. Ducimus optio consequuntur nemo eveniet reiciendis adipisci nostrum.

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