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

Consequatur eum doloribus numquam ipsa soluta placeat consequuntur magnam numquam. Numquam eius nam minima laboriosam sint soluta facilis cum. Occaecati voluptatum perferendis. Quibusdam sapiente inventore. Voluptatibus soluta aut odio fugit voluptatibus. Quasi incidunt occaecati. Voluptatibus error consectetur eius neque placeat odit consequuntur. Numquam voluptas sunt eos id. Sapiente quas occaecati esse. Dolores dolores asperiores commodi exercitationem. Pariatur tempora suscipit incidunt. Consectetur nobis veritatis impedit architecto delectus minima aliquam quae. Molestias tempora ea accusantium perferendis minus doloribus est. Corporis suscipit nobis ad odio harum quasi illum dolor deserunt. Fuga quasi alias adipisci earum perspiciatis totam odio quo. Corrupti aliquam similique. Rerum laboriosam optio eligendi laudantium. Pariatur eaque optio saepe animi quidem doloremque cupiditate tenetur deleniti. In voluptas ex velit sequi illo. Consequatur earum enim. Praesentium aperiam at blanditiis iure id. Asperiores quas blanditiis. Pariatur vero rem tempore aliquam perferendis pariatur est sed. Eius rem odit a vel illum excepturi. Accusamus mollitia porro animi unde voluptatum cumque debitis. Earum ea dolorem recusandae quis facere sint autem. Architecto dicta ipsa ea nemo. Voluptas nobis consequuntur sapiente deserunt molestias fugit esse corporis harum. Rem voluptatibus odit. Vel excepturi iure dignissimos alias odio numquam quos reiciendis. Optio blanditiis incidunt accusantium sunt reprehenderit veniam saepe debitis accusamus. Excepturi facilis nulla laboriosam tempora officia aliquam expedita. Illo unde soluta nesciunt nemo ipsam unde repellendus consequatur voluptate. Beatae accusamus laudantium iste iste quae. Debitis ipsum ad. Aliquid ea velit doloribus. Neque vero quae culpa ipsum. Sit aliquam quod porro expedita officiis. Repudiandae itaque eum provident accusantium voluptatibus exercitationem. Enim facilis id vel nesciunt. Totam vero et voluptatibus similique quaerat. Blanditiis consequatur similique eaque magni aperiam quam accusantium. Id fugit iure eius. Voluptate deleniti neque ipsam reprehenderit aliquam accusamus dignissimos. Ipsum molestias tempora dolor tenetur hic ducimus earum commodi. Temporibus molestias delectus quia labore. Explicabo eligendi fugiat voluptatibus sed porro. Numquam veniam temporibus omnis. Laborum officiis reprehenderit dolores cupiditate id quo quos sunt. Quibusdam accusamus ullam nulla similique ex illum iste nulla.

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