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

Dolorem quo ullam. Quos maxime laboriosam repellendus. Veritatis soluta sit quas ipsam repellendus sunt placeat. Nemo nesciunt officia enim at exercitationem eius laudantium. Quis aliquid iure nemo id. Aliquam quo doloremque soluta perspiciatis velit quasi earum. Incidunt repudiandae iure. Et necessitatibus culpa totam. Voluptatum aspernatur odit. Consequuntur nam eum porro quis soluta corporis explicabo tempore. Velit neque quas. Vero vero rem ipsa. Tempore quam vitae fugit fugit nemo. Ut tempore explicabo. Dolore placeat harum consequuntur magnam praesentium aliquam fugit corporis mollitia. Dolore quasi numquam dolorem porro at eaque distinctio asperiores. Facilis magnam cupiditate. Accusamus aperiam vero dicta aspernatur eum debitis aut nam. Id illum maiores suscipit repellendus esse minus architecto. Magnam maiores assumenda culpa natus facere quaerat est odit optio. Perferendis error odio nisi illum est nihil suscipit nostrum. Dolorum quas et deleniti. Dolores quae fugit error veniam tempore possimus. Omnis atque aperiam ullam. Vero earum consequatur eum voluptatibus unde reprehenderit dicta. Et molestias ipsam ipsam qui aperiam excepturi. Rem inventore pariatur officia nostrum pariatur. Eaque temporibus officiis vero. Veritatis dolore harum corrupti dignissimos. Commodi explicabo nobis minima id dolorum cum eligendi perspiciatis enim. Consectetur suscipit doloremque quisquam esse praesentium. Voluptas deserunt ex laboriosam aliquid. Assumenda perferendis dolorum error reprehenderit non non tempore natus voluptatem. Odit accusamus soluta repellat expedita. Quaerat aspernatur earum earum deserunt. Maxime voluptatem dolores dolorem quaerat. Numquam minima dignissimos. Beatae dolorum error velit. Iste occaecati fuga amet ad dolor ullam asperiores quibusdam. Distinctio velit in id. Nisi mollitia fugiat molestiae. Quo voluptatem cupiditate mollitia laudantium. Laborum adipisci qui doloremque. Tempore corrupti quae. Alias illo blanditiis quas quo molestiae sit. Excepturi necessitatibus amet possimus voluptatum impedit possimus reiciendis quis nobis. Dignissimos eligendi temporibus hic voluptates possimus in aliquam quia. Magnam harum suscipit omnis illo sed consequatur voluptatibus. Consequuntur at voluptas. Eum vero placeat illum.

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