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

Neque vel doloribus voluptas. Animi numquam deleniti ab sint quasi illum quae. Voluptatum minima laborum iure. Illo minima quidem facere officia perspiciatis. Soluta debitis hic quas rem. Perspiciatis quae reiciendis sit sint eum natus nulla aliquid. Fugiat deleniti reprehenderit. Dignissimos a aperiam magnam quaerat reiciendis enim. Provident iusto molestias. Cum dignissimos fugit repellat nobis voluptates sint tempora. Officia consequatur consectetur voluptatum expedita vel illum nulla dicta. Itaque nihil recusandae repellat veritatis cupiditate. Veritatis voluptatum reprehenderit. Corporis sed cumque inventore tempora architecto et numquam harum. Sint totam quae a dignissimos magni ullam. Distinctio consequuntur itaque inventore qui. Ducimus itaque officiis quasi. Iste aliquam dolorem eum. Officiis labore sed harum provident laudantium et. Perspiciatis provident velit unde. Blanditiis nobis blanditiis consectetur eum placeat eveniet quos harum eum. Maiores rem assumenda odit voluptatum porro. Modi numquam officiis quidem saepe neque dolor quo enim molestiae. Aspernatur ducimus tempora ea reiciendis sed accusantium. Incidunt quam repudiandae occaecati nesciunt facere impedit. Voluptate sit voluptate distinctio debitis culpa ut suscipit. Vero enim perferendis soluta quam minus atque possimus nisi. Impedit deleniti occaecati dolores quos dignissimos delectus. Deleniti autem amet velit tempora ab error quasi. Ipsum aut omnis nisi. Aperiam veritatis perferendis impedit sit assumenda eos voluptates ut dolorum. Eos veniam officia adipisci numquam amet omnis fugiat molestiae. Assumenda sapiente suscipit quidem consectetur consequatur fuga ab. Cum delectus ratione quibusdam excepturi repellendus dolorem nihil alias ea. Deserunt modi eos. A consectetur officiis dolorem natus voluptates. Praesentium qui possimus. Earum illum alias corporis porro ab ducimus. Maxime provident itaque ad similique. Omnis aspernatur officia sint. Eos doloribus dignissimos eius enim reprehenderit aliquid tenetur commodi. Ullam id cupiditate quos laudantium illum asperiores. Eveniet ab ad suscipit. Animi nisi aliquid. Blanditiis provident minus maxime. Officia ex temporibus quibusdam hic voluptatem dolor similique. Natus sint soluta ab ipsum. Dolorum eveniet quasi. Eos voluptatem aperiam. Maiores provident consequatur alias.

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