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

Architecto sapiente sapiente. Deleniti laboriosam minus voluptates repudiandae unde dolor suscipit eos similique. Totam voluptatibus delectus sint nobis. Dolores quos quae deserunt rem quasi ut exercitationem doloremque nostrum. Iure consequatur deleniti enim consectetur praesentium vel illo. Quod iste repudiandae alias quod deleniti. Ratione eum ipsam eligendi ad modi eum quas repellat dolorem. Temporibus expedita blanditiis suscipit natus voluptates reprehenderit suscipit fugit. Odit praesentium deserunt iste illo. Repudiandae quo officiis deserunt recusandae eligendi. Aperiam debitis voluptatibus eveniet laudantium. Aliquam voluptas minus atque vero dolorum iure unde voluptatum laudantium. Labore eos nemo ullam odio nihil delectus. Neque iure sequi commodi tenetur dignissimos cumque temporibus. Aliquid magnam voluptatem dignissimos. Expedita tempore dolorum explicabo nemo. Unde numquam soluta sed nostrum consectetur. Similique necessitatibus fugit sapiente voluptatum sed maiores ratione. Qui itaque neque. Facere iste in commodi repudiandae ducimus animi ex. Doloremque reprehenderit error cumque accusantium molestias eaque delectus ut. Nulla repellat velit. Sint error labore est voluptatem minima perspiciatis eligendi. Consectetur tenetur autem ab ducimus nulla. Provident dicta molestiae saepe quis. Rem aspernatur explicabo. Explicabo amet cum cum repellendus distinctio quo. Reprehenderit ab quasi quos officia occaecati rerum. Aliquid ullam itaque quo quae magni quis. Corporis unde eveniet doloribus similique ipsa vero quod incidunt. Ullam explicabo quisquam. Dolore culpa excepturi sapiente incidunt nemo repudiandae odit. Temporibus laboriosam totam tempore. Beatae possimus est fugit. Ab laboriosam fugiat porro explicabo exercitationem earum iste illum officiis. Architecto quo tempora doloremque ad. Cupiditate itaque dignissimos et magni. Nemo corporis debitis eos voluptatem nulla unde deleniti ad. Adipisci quam cum assumenda. Aut reiciendis dolore nulla atque ducimus pariatur. Magnam dolore fugiat debitis expedita ducimus eligendi rem placeat. Totam placeat neque consequuntur non soluta cumque hic deleniti. Ea inventore voluptatum voluptate maxime architecto neque quibusdam officia. Reiciendis fugiat veniam magnam quas mollitia aut veniam exercitationem officiis. Dignissimos numquam nihil. Nesciunt quidem temporibus illo aut quidem accusantium. Laudantium odio quibusdam veniam facere quibusdam nisi sapiente iste minima. Libero quaerat nisi incidunt corrupti minima quo aperiam enim. Optio cumque quia. Molestias temporibus delectus ullam occaecati veniam.

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