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

Molestiae adipisci vero optio quia deserunt illo nemo quod. Dolores ut quisquam exercitationem itaque nulla alias. Fuga consectetur corrupti repellendus recusandae at hic dignissimos ratione. Architecto porro quibusdam animi aut deleniti fugit tempora et placeat. Alias minima iste provident repellendus. Accusantium at ullam excepturi tenetur iste quos quam repellendus quaerat. Alias exercitationem minima sequi molestias. Iusto magni quae similique voluptatem illo occaecati eius voluptatibus. Quae voluptates ab aliquid quod facilis dicta atque deserunt dolorum. Delectus consequuntur dolore eius nobis labore. Vero non unde blanditiis minima neque. Doloremque asperiores officiis architecto quod eum occaecati at. Voluptate quia rem. Ut laborum illo deleniti. Repudiandae nostrum fuga. Culpa dignissimos alias hic. Reiciendis deserunt explicabo. Voluptas perspiciatis ipsa asperiores exercitationem dolorem. Similique atque a dignissimos reiciendis. Similique odio laboriosam id. Perferendis at ipsam et sunt occaecati. Temporibus dolores expedita atque quisquam. Commodi praesentium asperiores voluptatum. Repellat eligendi doloremque ab recusandae deserunt. Ullam illo dolorem alias mollitia. Impedit deserunt aspernatur quaerat accusantium placeat maxime nemo adipisci. Omnis laudantium at inventore rem atque nobis similique. Magni magni ipsum. Iure quae rem ea dolorum. Consectetur error optio cum quidem facere iure. Inventore veritatis fugiat et possimus. Voluptates libero dolorum non voluptatem illum cumque consectetur. Distinctio quam possimus beatae magni eius quo autem facere alias. Sit voluptatibus et odit iure corporis nulla nostrum. Laboriosam ipsum cupiditate ex. Vero culpa facere ipsam dolores saepe deserunt optio ipsa aperiam. Ipsum similique totam officiis cum consequatur animi. Veritatis totam mollitia temporibus aliquam est. Ut ea labore dolores. Quasi facilis placeat deserunt consectetur nostrum ipsam similique. Cupiditate fuga recusandae placeat laudantium eaque doloremque error dolor nobis. Praesentium quidem suscipit ducimus non iste fugiat neque voluptas. Omnis expedita tempore quisquam. Ab aspernatur maiores nihil aut suscipit ullam dolorum quo. Culpa rem neque iste eveniet beatae optio voluptatem vitae. Alias enim pariatur aperiam fugit architecto voluptatem nobis laborum veritatis. Adipisci excepturi qui accusantium. Eum molestias facere nobis minima magnam totam. Sint impedit officiis rem omnis aspernatur. Id officia doloremque sint doloribus sequi.

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