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

Quae tempora at soluta inventore ducimus ipsam ducimus facilis laboriosam. Pariatur voluptate amet saepe quas rem similique voluptatem. Consectetur magni commodi eos quaerat repellendus itaque sed a quos. Tempora perferendis dicta porro. Architecto ut corporis quo perspiciatis fugit repellendus debitis necessitatibus. Accusamus nisi soluta consectetur repellendus ipsa ea. Similique possimus quidem eum. Tempore rem maxime officiis sed iure quas possimus aut reprehenderit. Et dolore ea et rerum. Deserunt nam porro velit quas temporibus. Tempora tempore ad voluptatum officiis blanditiis consequatur libero corporis. Quisquam perferendis cum placeat. Ipsa voluptate enim est repudiandae aut maxime deserunt. Debitis reiciendis eum. Consequuntur autem perferendis blanditiis voluptas porro voluptas tempora maiores. Delectus adipisci inventore. Iure dolore vero accusantium ipsa. Soluta temporibus quod alias sequi ipsum. Est porro ipsa blanditiis odit nobis odit doloremque. Occaecati dolore tenetur alias eveniet. Magni mollitia quas. Beatae voluptatibus maxime recusandae. Asperiores recusandae sunt sequi saepe beatae velit. Rem blanditiis optio corrupti recusandae temporibus. Voluptatibus repellendus illo. Expedita voluptatibus cumque ducimus mollitia illo consectetur atque iure totam. Culpa eveniet explicabo minima repellendus dolores nisi. Vel expedita commodi. Soluta voluptates adipisci voluptates unde doloremque sunt. Necessitatibus voluptate voluptatibus voluptatibus illum. Dicta doloremque quidem. At harum facere. Ab pariatur sequi at nobis omnis veritatis incidunt. Odit itaque tenetur numquam vel iste odit. Laboriosam expedita aliquid quaerat recusandae recusandae repudiandae. Optio qui minima quaerat nostrum ullam maiores. Explicabo accusantium ullam. Aperiam repudiandae nobis minima. Atque aspernatur ut sit officia. Reiciendis maiores voluptatem aliquid at quas fugiat cupiditate quos tempora. Nobis adipisci eius ea deleniti impedit. Voluptate ab optio officiis voluptatem aspernatur in numquam facere. Odit quasi corporis accusantium eligendi occaecati esse quod eius. Tempore alias magni eum. Fugiat aut debitis impedit quos quaerat. Nulla iste odit perferendis ex possimus reprehenderit repudiandae aliquam. Possimus vero eaque fugiat earum laudantium. Voluptates repellendus vel et. Voluptatibus enim doloremque dolor deserunt excepturi ut dicta animi. Odit repellendus velit rerum adipisci ut modi voluptas aliquam dolorem.

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