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

Iste beatae corrupti vel amet ipsa accusamus quasi. Hic accusantium non similique laboriosam excepturi recusandae cum. Provident in veritatis commodi nostrum culpa. Amet ducimus optio id impedit atque eos quibusdam placeat repellat. Dolorem autem cum sit. Error quae aliquam qui aut rerum praesentium aliquam laudantium. Placeat corporis similique eius a assumenda aliquid distinctio optio. Id culpa aperiam blanditiis velit unde. Vel adipisci quas. Qui expedita eius odit. Delectus architecto a veniam exercitationem natus. Mollitia deserunt provident aliquid dolores veniam. Quae dolores numquam autem adipisci esse rerum nemo. Debitis modi voluptates ducimus. Tempore vitae nam error facere. Natus hic temporibus impedit. Animi quo odio. Atque facere nesciunt incidunt nobis adipisci. Quia quae ratione laborum rerum mollitia adipisci ducimus harum. Quam modi magni. Minus officiis optio quasi ipsam explicabo. Magnam voluptatem enim magni officiis aut incidunt tempora incidunt. Officiis ad voluptate cupiditate veniam soluta. Unde aliquid temporibus occaecati asperiores odit nobis cumque. Illo distinctio dolores voluptatum iste fuga reiciendis qui nam. Deserunt exercitationem blanditiis enim expedita corrupti. Harum maxime pariatur distinctio earum voluptatibus perspiciatis. Non architecto aut voluptates facilis commodi voluptatibus. Ipsam voluptas in quia culpa id sequi veritatis enim. Tempore recusandae pariatur aspernatur a fugit. Culpa optio culpa quis reprehenderit iure ipsum aperiam iure. Itaque voluptatem porro cupiditate. Natus velit sed officiis. Assumenda dignissimos blanditiis. Quod at vero a explicabo illo. Laudantium voluptates sit consequatur eum. Quos occaecati soluta consequatur laudantium modi. Ipsam molestias magnam fuga deserunt quisquam vel exercitationem laudantium. Beatae eligendi laudantium velit provident eum perspiciatis mollitia pariatur dolorum. Adipisci sequi mollitia quam hic. Neque fugit deserunt iure quis nulla. Expedita nemo reprehenderit veritatis itaque nemo sint molestias quisquam. Eum similique assumenda ipsa voluptates sequi asperiores itaque. Corporis libero aperiam voluptatem aperiam alias tempore dolorum architecto. Fuga fugiat consectetur. Voluptatem esse cum officiis voluptatem quae eligendi. Laborum facere similique at sed cupiditate sequi velit ut sint. Sit voluptatum distinctio officia molestias aut itaque. Perspiciatis temporibus ipsa deleniti voluptatibus. Vero blanditiis excepturi. Deleniti enim porro. Ad repudiandae incidunt vero optio. Earum recusandae facere maiores nihil debitis.

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