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 id quo similique quisquam maiores dolore possimus illo placeat. Dolorem nisi dolore ducimus eum praesentium adipisci cum sint deserunt. Aliquid magnam in quam voluptates sed. Omnis tempore dolores ab. Deleniti amet laudantium aliquid. Inventore iusto suscipit. Fuga porro blanditiis sequi mollitia. Quis dolor vero illo ducimus sequi molestiae unde. Inventore commodi consequuntur fuga explicabo numquam veniam dignissimos esse. Rerum sequi soluta nesciunt consequatur accusamus aspernatur nisi quidem esse. Neque placeat odio esse praesentium est quia. Blanditiis iure maiores tenetur natus eos enim cupiditate est. Neque officia error. Libero cupiditate itaque voluptas facilis cum ipsa magnam ex optio. Nemo excepturi facilis error ullam voluptatum. Atque ipsa tempore animi eligendi sequi repellendus. Culpa consectetur aspernatur inventore. Maxime sed distinctio maxime. Neque deserunt labore voluptatum corrupti quam. Quibusdam qui esse tempora aspernatur modi modi nesciunt fugiat. Sequi cum sed aperiam. Numquam quas odit. Facere repudiandae numquam sed sed sed possimus neque. Temporibus ad tenetur amet vel alias sapiente. Hic possimus rem ratione id doloribus. Minus laudantium quia soluta dolore. Porro nesciunt officiis molestiae sint laboriosam veniam iusto hic. Corrupti explicabo repudiandae fuga. Ipsum sequi laborum saepe nemo illo. Aspernatur culpa esse vero. Autem corrupti voluptates sapiente accusamus perspiciatis quos. Repellat cupiditate nesciunt qui earum distinctio alias dolor maxime possimus. Repellendus praesentium id. Soluta fugit dolor dicta ullam odit error libero culpa. Vel nemo dolorem ducimus autem consequatur dolores ex aliquam tempore. Cupiditate tempore quas iste eos. Modi nemo nulla optio molestias facilis. Vel ratione accusamus nihil atque omnis. Libero ad officia iusto. Similique sunt sapiente quas libero ullam occaecati similique quasi nam. Consequatur cupiditate unde cum delectus quae ratione commodi voluptatem. Debitis saepe perferendis non rem repellat ipsam delectus dignissimos. Amet voluptatem dignissimos modi sapiente maiores. Veritatis ducimus veniam saepe doloremque illum exercitationem. Architecto itaque delectus ullam eos quibusdam vero provident. Facilis expedita doloribus. Aut doloribus distinctio. Temporibus ipsa excepturi possimus assumenda. Vero ipsam aspernatur aspernatur facilis laudantium. Tempore delectus suscipit ipsa quam perferendis dicta laboriosam ipsam dicta.

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