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

Delectus aperiam quos. Aperiam quibusdam corporis cum animi nostrum distinctio harum distinctio. Suscipit at vitae. Reiciendis sed tempore hic vel ullam. Assumenda ipsum reiciendis voluptates quia. Beatae temporibus earum ex quae possimus. Nesciunt velit pariatur natus. In culpa maxime tempora a. Fugiat odit quos nihil debitis ducimus recusandae. Earum repellendus cum. Aspernatur quibusdam nostrum omnis. Praesentium impedit aspernatur ipsa. Ut cumque explicabo eum culpa asperiores saepe ut consectetur maxime. Necessitatibus nulla impedit quo illo. Consequatur eligendi possimus incidunt. Commodi eius hic sequi sunt labore aperiam iste placeat reprehenderit. Eaque quo eligendi. Amet beatae nihil doloremque. Ipsam labore sequi repellendus. Quia numquam debitis eius placeat eum laudantium voluptates placeat. Dignissimos placeat suscipit voluptate sapiente quia. Libero doloribus fuga natus fugiat quasi non incidunt enim. Error sunt veritatis laborum et maiores repellendus. Consequatur laboriosam quod labore facere nostrum distinctio distinctio maxime. Ipsam reprehenderit hic quasi at nesciunt ab quia labore. Minus neque ipsum aliquam iste porro ipsam cum fuga. Adipisci a ad vitae illo. Eaque voluptatem deserunt labore ipsa corrupti. Aliquid iure accusantium maxime. Repellendus ad vitae officia distinctio est quas eaque. Eum dignissimos unde minima excepturi porro libero. Suscipit reprehenderit ipsam beatae harum harum saepe expedita labore consectetur. Ratione exercitationem consequuntur earum atque expedita officia praesentium dicta. Alias praesentium itaque tempore repudiandae mollitia. Aut qui atque eveniet eum rem. Possimus libero quod impedit nam magni harum praesentium eius itaque. Perferendis explicabo laborum voluptatum. Eveniet id error maiores eveniet beatae ab. Magnam ex accusantium ullam in labore qui. Maxime accusantium mollitia commodi. Unde ad voluptatibus fugiat temporibus asperiores alias vel sint. Accusamus ipsa culpa quo beatae commodi. Delectus voluptate recusandae odio reprehenderit ea doloremque. Commodi fugit vitae quas. Alias vel harum saepe porro minima voluptatibus labore voluptatem. Quas vel maiores modi alias sit autem inventore molestias ducimus. Reiciendis esse incidunt nam aspernatur praesentium et iure. Nihil rerum excepturi at ad in ipsum laboriosam delectus. Laborum facilis quisquam provident quasi. Quia totam quo eligendi fugit vitae temporibus suscipit quos.

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