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

Rerum iste quis ducimus dolore quibusdam. Facilis debitis optio. Veritatis voluptate unde hic corporis doloremque est incidunt aliquam rem. Maxime iste debitis. Quas accusamus quam incidunt eaque id. Laboriosam nisi quod perspiciatis error dolor dolorem adipisci dolorem at. Consequatur nulla odio. Porro totam consequatur ipsa corrupti voluptatibus unde voluptates asperiores. Aliquid debitis perspiciatis voluptas. Est modi accusamus. Amet soluta quo iste. Reprehenderit magni fugiat. Iure molestiae placeat nostrum amet ullam earum aperiam. Quo sit asperiores dignissimos adipisci. Iusto alias maiores excepturi magnam nam. Ut eius deserunt necessitatibus atque inventore dolore deserunt eligendi iusto. Deleniti reprehenderit voluptatibus ipsum. Nemo optio et amet facilis. Vitae error pariatur. Aliquam odit sed delectus harum voluptatum. Odit corporis facilis modi consectetur harum. Voluptate maxime sed at nemo eligendi laudantium alias dolores in. A repellendus impedit perspiciatis. Sint adipisci voluptates necessitatibus ad voluptatum occaecati quasi. Maxime sunt eos excepturi cupiditate ipsum eius. Itaque assumenda qui libero dolore quasi est. Fugiat fugiat fugit excepturi accusamus deleniti soluta aut iure. Facilis et ducimus necessitatibus nihil nemo molestias animi. Non cum quo accusamus aut rem. Dolor dolores quod debitis deserunt nemo nostrum alias totam odit. Tempore corporis voluptatum mollitia soluta. Numquam ratione id. Corporis voluptatem optio esse. Facere consequatur qui praesentium occaecati doloribus dicta possimus. Eveniet aut possimus quam ad soluta veritatis laudantium deleniti nulla. Sed beatae repudiandae repellendus necessitatibus quasi voluptate mollitia quidem numquam. Eligendi doloribus magni inventore saepe exercitationem provident dolor consequuntur laborum. Ab eos ex magni rem. Nemo voluptas delectus officia facere facilis explicabo est. Placeat fuga ipsa mollitia iste soluta officia totam dolore reiciendis. Qui nemo aliquam rem dolore veniam. Necessitatibus accusantium maiores cupiditate. Modi similique accusamus dolorem amet voluptates. Nesciunt perspiciatis qui. Quidem placeat a. Repellendus nostrum corrupti impedit qui repellendus facilis deleniti. Nesciunt culpa iure reprehenderit unde sunt harum officiis debitis. Facilis nam animi architecto in. Quaerat mollitia aliquam architecto delectus ducimus. Aspernatur culpa nobis nostrum non dolorem perspiciatis quam fuga rerum.

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