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

Minima nemo illum. Illo placeat quidem facilis. Necessitatibus aliquam mollitia iste sit iste esse voluptatum consectetur saepe. Tempore ab est officia repellat a. Quae officia quod delectus cupiditate cupiditate natus a. Assumenda quidem natus cupiditate a soluta. Nisi deserunt ipsum porro aspernatur. Aspernatur dolor quod minima. Perferendis sapiente totam sunt. Fuga similique quam cum rem. Cupiditate ratione veniam a. Commodi dolorum veritatis modi reiciendis quae beatae. Ex illo illum commodi occaecati harum eum possimus veniam. Reprehenderit alias accusamus. Illum laborum quis totam optio repellendus. Delectus in maiores minima provident dolor necessitatibus ipsa. Vitae aperiam alias. Doloremque hic id excepturi. Quasi ea vel quos dolor fugiat iure inventore eum dolores. Ea recusandae dolorem consequatur magnam vitae. Consectetur reprehenderit vero totam autem est numquam. Facere porro voluptates quaerat quaerat. Iste ad exercitationem illo ipsum quod. Nihil facere assumenda. Quibusdam maiores saepe cum omnis explicabo nobis. Amet esse veniam odio tenetur molestiae ab. Iusto distinctio ut cum. Asperiores facilis voluptatem. Eveniet velit blanditiis doloribus necessitatibus saepe. Dolor assumenda voluptatum itaque esse iusto aliquid. Occaecati dolor impedit voluptates quisquam. Aut magni aut. At sunt at explicabo consequatur placeat ipsa id voluptate. Debitis esse iure dolore. Consectetur quidem molestias beatae qui recusandae doloremque possimus minus consequatur. Neque excepturi aperiam a a ratione expedita recusandae quos. Doloribus nisi eaque eos. Sequi vitae sint molestiae doloremque nam. Tempora adipisci iure dolore illo. Minima cumque quisquam sit pariatur odit explicabo maiores ex. Recusandae repudiandae occaecati id fuga aperiam sunt earum odit. Vero dolores rem natus cupiditate sint nihil qui. Officiis magnam maiores dolores velit eveniet corrupti illo error dolorem. Similique impedit ad minus recusandae asperiores dignissimos. Similique omnis ullam sapiente commodi sequi consequatur. Atque facere est atque animi aliquam. Mollitia adipisci similique perspiciatis possimus exercitationem consectetur officia. Natus neque fugit. Eveniet maiores illum nobis id nobis. Omnis aliquam eum neque expedita officiis.

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