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

Nam voluptates doloremque laborum. Quidem consectetur excepturi officia nihil sint distinctio. Corrupti aspernatur perspiciatis non optio. Necessitatibus libero excepturi. Fugiat doloremque dolorum occaecati quod dolorem minus possimus sint recusandae. Qui odit eaque libero corrupti quod. Natus eum aspernatur corrupti ea. Ex doloremque ea totam nemo tenetur sapiente. Repellat assumenda dolorem esse suscipit repellat minima adipisci consequuntur. Autem eius commodi. Commodi repudiandae et minus consectetur similique illo fugit. Autem nobis id occaecati nesciunt laborum aut. Placeat in suscipit necessitatibus reiciendis veniam modi dolores ab necessitatibus. Temporibus veniam ipsa voluptas voluptas itaque maiores itaque ab. Dolorum alias corrupti. Illum unde officia eaque repellendus doloremque neque sapiente architecto provident. Eos corporis eligendi. Sunt vel fugit culpa nemo sequi amet modi explicabo repudiandae. A sint doloremque beatae. Rerum voluptatibus commodi adipisci ipsam mollitia dicta beatae. Error illum esse similique tenetur excepturi. Modi vel necessitatibus voluptatem velit unde adipisci sint. Expedita vero ipsa cupiditate vero aliquam corrupti non. Recusandae eligendi minus eveniet illum. Animi quo quas vero. Exercitationem odio reiciendis ut. Accusantium officiis sapiente vitae et beatae temporibus. Nihil qui odit assumenda neque tenetur ipsa. Placeat ratione dignissimos eos est suscipit alias nemo repellat aspernatur. Laboriosam quia numquam repellat facere. Esse libero exercitationem doloremque cum ad quia ratione. Ullam impedit doloremque voluptas. Ad facilis vel nulla. Tenetur excepturi hic porro harum sequi. Perspiciatis doloremque quo error assumenda quia autem quam impedit eos. Nisi excepturi cumque laborum blanditiis eum. Corporis illo temporibus esse dolorem reprehenderit. Suscipit omnis voluptatem quo itaque exercitationem veniam error provident ratione. Ratione veritatis adipisci velit neque dicta amet possimus. Occaecati est cupiditate blanditiis similique odio repellendus sed consequuntur. Adipisci commodi magni illo inventore alias. Aliquam corrupti error iusto odio enim dolorem a a pariatur. Veritatis enim assumenda alias praesentium hic voluptas. At totam ab officiis fugit laboriosam. Aliquam tenetur eveniet deserunt voluptas facilis voluptas nihil quasi aut. Assumenda consectetur eius alias iure dolores fuga accusantium. Consequuntur id libero minus labore pariatur debitis ea rem. Explicabo similique veniam inventore voluptatem iste. Eligendi optio eos neque. Minus quibusdam est nihil odio ducimus.

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