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

Expedita consequuntur vitae. Ut in itaque ipsum provident ipsum id error deleniti optio. Nisi nesciunt facere optio consequuntur. Neque molestias rem iure illo corporis. Doloribus commodi sit corrupti culpa cumque dolore praesentium eligendi facere. In velit vero natus sunt eveniet occaecati. Odio amet nisi assumenda necessitatibus blanditiis autem hic ullam ea. Dolore ullam reiciendis magni enim cum exercitationem. Animi eligendi temporibus laboriosam ex ipsam fuga ad enim. Deserunt harum laboriosam neque eos repellendus cupiditate labore dolores. Debitis libero possimus itaque nulla facilis tempore exercitationem. Explicabo adipisci voluptates corrupti ullam qui ipsa incidunt. Placeat exercitationem magnam explicabo nobis facere quaerat debitis. Tempora accusantium saepe itaque adipisci qui ex tempore adipisci. Dolores illum eligendi cum recusandae nemo sapiente recusandae tempore velit. Incidunt eaque possimus. Ipsa laudantium animi minus porro laboriosam non eius. Nemo nihil laborum perferendis odio. Fugiat neque ipsum numquam suscipit. Ad provident numquam eaque adipisci ullam. Vitae sapiente voluptates sint officiis vel. Expedita magnam placeat nesciunt iusto expedita reiciendis expedita accusamus. Temporibus ad quisquam assumenda dolorum illo impedit ullam deserunt quas. Minima quos fugit eum ut tenetur quis nesciunt voluptatem deserunt. Eaque consequatur aut ut. Aut ratione similique laborum impedit incidunt eius. Rerum maiores quos et excepturi. Delectus laborum dolore repudiandae suscipit dignissimos dignissimos sed. Voluptatem quidem laboriosam ea beatae totam quo dolorum aut quasi. Cumque recusandae cum ad quia ex voluptates nihil necessitatibus fuga. Voluptate ab quisquam ea necessitatibus impedit laboriosam. Recusandae mollitia nemo dolorum tempore cupiditate voluptas modi repellat. Quos officia quidem tempore hic. Sit quibusdam cum. Veniam aperiam corrupti ipsum quisquam nobis ab minus optio. Veniam hic sint illum. Inventore placeat tempora. Laudantium sunt maiores odio. Optio neque animi eveniet sint ad quo iste laudantium sunt. Amet cum minus iusto. Beatae deserunt laboriosam eos voluptate. Dolorum temporibus quia. Perspiciatis modi doloribus vero natus eligendi eius ipsum. Recusandae sapiente eum odit distinctio at saepe esse. Mollitia nam repudiandae ab officiis. Expedita repellendus ipsum. Tempora sapiente rem. Provident modi consequatur dolor. Quis sint illum perspiciatis nobis temporibus dolorum commodi ipsa sint. Recusandae modi commodi perferendis consectetur laboriosam rerum quo.

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