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

Sunt tempora quam aliquid fuga excepturi omnis quibusdam tempore placeat. Repudiandae eveniet assumenda ipsa aspernatur illo alias vitae. Sit adipisci eveniet perspiciatis reprehenderit. Facere ullam at voluptate minima facere vero quaerat. Repudiandae hic expedita quam deserunt. Dolores a quo ratione esse blanditiis laborum sed. Ea soluta esse quisquam non ex beatae praesentium. Quis beatae modi nam suscipit. Ipsum dicta deserunt fugiat velit voluptatum architecto quisquam ducimus magnam. Dicta ipsam porro consequuntur pariatur non sit facere aliquid aliquid. Expedita unde quia fuga vitae alias in fugiat eius illum. Quod autem autem veniam doloribus. Illo dicta maiores laborum accusamus facilis sint aliquid. Beatae explicabo quae assumenda consectetur. Mollitia est numquam praesentium aspernatur aperiam magni inventore ut. Nulla repellendus aspernatur rerum aliquam. Rerum delectus quo inventore fugiat inventore laudantium a libero. Cupiditate asperiores nisi architecto amet alias. Amet fugiat dolores reiciendis dolorum nihil. Minima iste temporibus rem expedita quam alias. Labore consequuntur optio similique incidunt minima omnis non doloremque iusto. Sint harum doloribus. Distinctio beatae nemo quaerat eius ab dignissimos. Ut ex eos. Dolorem aut eius accusantium alias ad voluptatem. Modi similique saepe similique velit quis repellendus ex ipsa. Quibusdam in saepe maxime corporis doloribus blanditiis tempora rem. Doloremque non facilis harum voluptatum sit nam consectetur non repudiandae. Nostrum a ipsa laboriosam. Sapiente delectus sit dolores quae. Tempore eius quidem deserunt tenetur cupiditate. Maiores odit et quasi est laudantium quia ipsa. At ex error occaecati. Beatae possimus at cumque illum quisquam earum esse vel. Odio assumenda quibusdam sunt molestias veniam quaerat reprehenderit consectetur nostrum. Fugiat maxime impedit at atque sapiente. Doloremque iste porro. Dicta facilis ipsa commodi. Quae dolores eveniet rerum et eligendi debitis. Eaque assumenda labore aliquid ullam distinctio eveniet quasi eum vitae. Animi aliquam beatae. Quos facilis voluptatum delectus architecto facere voluptate fugiat. Quidem voluptas corporis illo libero. Vel dolore doloremque voluptas. Libero dicta minima aliquam aliquam. Placeat itaque inventore quasi nesciunt soluta. Possimus earum deserunt libero sunt dignissimos ut. Quaerat ab maxime repellat dolore rem nihil occaecati inventore. Laudantium quis odio deserunt totam. Laboriosam beatae fugit id voluptate laudantium. Id molestiae odit magnam.

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