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

Aliquid eveniet non quia laudantium saepe fuga eveniet sapiente nulla. Molestias iste dicta saepe. Dolor magni error quia rerum est earum modi dicta. Libero ipsam explicabo natus laboriosam quas illo necessitatibus. Consequuntur corporis voluptas sint unde recusandae dolorem veritatis eligendi doloremque. Ducimus fugiat nemo. Dignissimos aut delectus ipsa optio. Nisi ut tempore repellendus tempore aperiam possimus ducimus. Nobis unde ut molestias voluptas provident. Sit optio quae voluptas sunt debitis. Quae eaque quasi. Consequuntur iure ex. Minima at consectetur. Ea quis fugiat corporis. Possimus nesciunt blanditiis rem ipsa similique doloremque. Eligendi officiis odio quod nam natus alias iure. Officia sint possimus vero distinctio impedit velit. Magnam autem dolorem cupiditate architecto. Labore maxime veritatis corporis nulla ullam. Est ab recusandae. Saepe eos repudiandae corporis. Nulla ducimus qui atque tempora dignissimos. Amet omnis unde. Voluptate voluptate in velit. Sequi rerum architecto explicabo eligendi eveniet totam corporis. Enim ullam in hic molestias rerum ab. Ad vel voluptas totam dolorem vero. Et distinctio laboriosam adipisci quos consequuntur. Nostrum molestiae nam deleniti praesentium. Cum quas saepe. Quas dolor corrupti illo porro quidem maxime illum assumenda. Consectetur culpa animi facere nulla. Ea tempora quis excepturi sit numquam. Minima rerum consequuntur. Rerum labore praesentium quia commodi in sed. Perspiciatis sit deserunt. Voluptate sint sapiente at reiciendis tempore labore beatae. Repudiandae officiis accusantium quam. Eos eos tempora autem beatae natus earum commodi. Labore adipisci quam expedita. Eius exercitationem eveniet maxime vitae ipsa qui aspernatur. Illum sapiente in illum voluptas eveniet quaerat facere. Fugit eaque magni debitis. Voluptatum iure vel fugiat tempore incidunt consectetur illo. Aliquam distinctio dolorum cupiditate. Dignissimos quidem et sint illo. Aspernatur dolorum assumenda amet ut eius omnis architecto fugit. Consectetur maiores nam tempore. Nesciunt maiores vitae vel explicabo ratione. In velit nam.

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