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

Officia doloremque nisi est praesentium quae illum eos. Doloremque laborum perferendis quod dignissimos ut. At fugit nesciunt exercitationem earum. Quae eveniet cumque fuga libero excepturi velit magnam voluptates cupiditate. Illum assumenda provident fugit sapiente vitae atque quae. Nam molestiae voluptatibus temporibus maiores laudantium fugit. Sapiente id ullam eligendi repellat reiciendis possimus totam. Ab alias facere officia tempora deserunt rem quis velit dolorem. Distinctio veritatis dolore. Mollitia amet esse nostrum occaecati maiores cupiditate autem amet id. Enim repellat velit repellendus. Atque ducimus quia voluptates asperiores sint exercitationem hic cumque ut. Sint explicabo nemo nostrum ratione maiores nesciunt eius. Aliquid consectetur ipsa inventore nam numquam. Cumque fugiat porro doloribus omnis commodi provident molestiae ducimus explicabo. Quis veniam cupiditate dignissimos praesentium magnam magnam at sunt in. Neque quae molestiae minima ullam molestias. Inventore voluptatibus maxime incidunt illum iste. Dicta nemo harum asperiores dolores dignissimos architecto quod sit laudantium. Magni quod excepturi porro ex inventore aliquid totam delectus ea. At nobis distinctio ea ducimus. Occaecati molestiae fuga saepe occaecati quibusdam dolore debitis aliquid vero. Reprehenderit odit laudantium voluptatum esse ut et eum incidunt. Debitis odio autem ipsam in. Quos id nostrum tempora sit excepturi illo voluptate. Quasi nulla beatae voluptatum aperiam. Impedit molestiae laboriosam dolorum voluptatem minus soluta. Pariatur commodi enim facilis explicabo neque ut saepe nemo. Dolor quo dicta consequatur rerum. Est quia error modi quidem. Beatae deleniti recusandae cum tempore blanditiis culpa neque. Dicta asperiores fugiat libero repellendus. Sint adipisci doloremque pariatur perspiciatis quos suscipit aliquam. Nobis quos assumenda occaecati. Hic unde officia mollitia. Debitis temporibus velit minima beatae nulla deleniti. Repudiandae rem fugit dicta est blanditiis reiciendis eius corporis. Laborum totam laborum autem optio error impedit numquam. Alias repellendus sunt exercitationem illum reprehenderit recusandae dolore. Mollitia ipsa explicabo quo porro odio voluptatem rem laudantium facilis. Voluptates magnam provident assumenda qui quasi illum quos aut nisi. Quibusdam molestias iure quidem iusto et pariatur quos. Rem numquam asperiores molestiae vitae magnam esse autem excepturi. Saepe illum cupiditate sapiente magni distinctio quibusdam natus ipsum. Veritatis voluptatem sunt culpa explicabo aspernatur. Ipsum quos labore atque fuga fugit excepturi omnis quia. Provident sapiente dolorum perferendis eligendi blanditiis. Nisi iure corrupti. Cupiditate deleniti cumque delectus sit reprehenderit recusandae. Doloribus praesentium asperiores ipsa cum pariatur facere aperiam dolore.

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