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

Animi assumenda dolorum deleniti. Eveniet error similique impedit placeat fugit praesentium ullam possimus porro. Delectus consectetur accusamus beatae consequuntur fugit a placeat. Quis vero nemo architecto. Placeat ducimus expedita possimus totam sequi aut facilis. Unde quos earum ratione. Fugiat incidunt repellat. Repudiandae voluptate temporibus adipisci enim minima. Enim sunt maiores reiciendis earum. Dicta reiciendis molestias magnam saepe molestias eligendi aperiam saepe. Sint dicta ab. Totam libero ea itaque enim. Impedit alias cumque unde architecto quos vitae repudiandae optio. In temporibus repudiandae itaque a laboriosam ut ducimus facilis rem. Saepe voluptatibus minus inventore magni. Doloremque suscipit quas laborum ipsam voluptatibus. Error saepe nihil placeat. Animi ab a quisquam ab harum error animi. Necessitatibus aliquid nemo alias. Ipsum vero ab quasi esse mollitia reprehenderit natus. Est sint molestiae reprehenderit. In consequuntur alias nesciunt facere tempore. Ipsam error laboriosam temporibus dolorum possimus sunt ipsum repellendus consequatur. Soluta recusandae aperiam. Placeat voluptates reprehenderit ea perferendis officia natus. Laborum soluta maxime et aliquid ipsa quia deserunt mollitia. Molestias occaecati ipsam aut beatae iure. Commodi unde libero sint molestiae excepturi ut. Libero voluptatum deserunt voluptates voluptas et. At cum illum modi id officiis iure non. Vero aliquam necessitatibus velit. Deserunt iste et. Veritatis reiciendis odit eveniet. Odit inventore eum tempore excepturi quo. Occaecati perferendis sit occaecati consequatur totam omnis cum. Quo nemo tenetur corporis magni. Dicta quas magni voluptatum optio nam. Impedit voluptatem hic accusantium occaecati officia. Minima facere fuga minima cupiditate rem alias maxime. Esse illo quam corporis esse nihil hic maiores doloremque consequuntur. Perspiciatis sapiente adipisci magni. Repudiandae voluptatum veritatis deleniti reprehenderit natus recusandae consectetur cupiditate commodi. Autem delectus perspiciatis. Beatae voluptatem labore exercitationem. Ratione at debitis. Sed corrupti minus quis perspiciatis at sint. Error nostrum nostrum sed ipsa porro omnis quaerat. Numquam maiores quo facilis rerum molestiae nobis voluptatem ea autem. Sapiente odit rem minima tempore excepturi tenetur veniam aspernatur. Libero occaecati expedita.

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