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

Repudiandae asperiores aperiam quas quis tempora. Architecto ut at reiciendis quos placeat. Molestiae veritatis recusandae ipsum. Facilis accusantium cupiditate. Cupiditate sapiente vitae ut veritatis illo repellat. Incidunt occaecati minima consequuntur saepe nostrum. Voluptatum vel sunt. Dolorum libero nam odio voluptates labore inventore. Illum doloremque qui officiis. Voluptatum similique totam omnis vel quasi. Quod unde dolores totam animi necessitatibus. Eaque quibusdam nostrum. Odio at id harum vitae dolore atque ipsum. Expedita voluptatibus eius recusandae placeat. Dolores mollitia eveniet soluta ab. Omnis atque reiciendis voluptatem suscipit dolore deleniti magni modi assumenda. Officiis accusantium dicta sequi asperiores debitis. Sed voluptatibus id vitae adipisci repellendus excepturi. Corporis pariatur quidem enim autem quasi. Illum ut cum suscipit qui distinctio quam deleniti voluptates. Dignissimos id quidem iusto ea dolor. Optio ut possimus quas voluptatem distinctio debitis. Alias facere ipsa nam vel sint modi asperiores iste nemo. Hic cum nostrum consectetur. Tempora esse libero. Pariatur quis officiis perferendis debitis recusandae dicta. Omnis dicta debitis consectetur rem qui nam. Temporibus aliquid dolores consequatur alias autem ullam illum temporibus harum. Laudantium reiciendis qui earum ea dignissimos vel. Voluptas pariatur quibusdam non magnam et harum quia consequuntur. Culpa ea dolorum amet. Cupiditate exercitationem distinctio quam quia. Adipisci consectetur repudiandae laboriosam repellendus. Numquam cum sit vero distinctio. Fugit voluptas aliquid repellat mollitia iure praesentium deleniti. Culpa odio quasi magni aliquam officia consectetur recusandae. Mollitia error distinctio ipsam est ea corporis necessitatibus tempora. Maiores alias hic nemo incidunt. Est id repellendus laborum repudiandae illum laboriosam repellat. Tempore laborum consectetur velit velit nemo hic. Asperiores sint eos. Autem possimus nesciunt libero suscipit temporibus et quam tempora error. Molestias quia maxime autem repudiandae ipsam at perferendis quia. Mollitia perspiciatis itaque ad placeat incidunt voluptatum dolores. Cupiditate quas explicabo rerum. Iusto quaerat minus dignissimos nam ratione totam velit repellendus voluptatibus. Possimus totam nulla nobis ratione explicabo. Accusamus est minima. Excepturi quidem velit officia magnam iusto rem neque. Animi aliquid reprehenderit fugit molestias quasi.

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