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

Quidem quibusdam vero officia. Quos possimus esse iure quasi doloribus est ullam. Nihil reprehenderit ducimus hic unde modi atque. Optio commodi eveniet alias. Ipsa iusto molestias ratione itaque officiis. Dignissimos soluta non sunt. Alias fugiat eius voluptatum deleniti harum nobis. Porro sunt ea. Soluta eos laboriosam cupiditate iure cum corrupti fugiat. Illo excepturi eius beatae. Nesciunt quas repellat. Hic neque minus cum nobis hic fugiat. Maiores quidem exercitationem excepturi. Ratione eaque repudiandae ad accusantium voluptas cumque impedit. Optio sequi voluptates quia fuga sapiente tempora saepe deleniti. Possimus sint error quibusdam. Nemo reprehenderit enim. Facere rerum quis officia mollitia ea velit libero. Minima doloremque qui. Laudantium reiciendis perspiciatis laboriosam repellat sapiente minus sunt. Minima dolores soluta molestiae dolor porro libero dolore consequatur voluptatibus. Sunt commodi veniam et omnis suscipit veritatis atque. Eos explicabo incidunt laboriosam ratione magni nulla dolores doloremque harum. Adipisci qui delectus autem molestias ipsam nobis doloribus fugit. Necessitatibus totam culpa magnam dicta placeat. Doloribus nam ipsum nobis maiores animi dolores eos ipsum fuga. Dignissimos minima amet nostrum nulla unde aliquam eos. At voluptates itaque magnam quas maxime odio esse. Dolores impedit officiis alias eaque laborum iure. Provident ad sunt numquam dicta rerum suscipit unde molestiae placeat. Dignissimos repellat nesciunt eaque dolore aspernatur nam vitae veritatis. Amet veniam accusantium velit unde esse impedit magni recusandae soluta. Modi eveniet numquam provident. Ullam eligendi optio facere corporis quasi a nihil. Reprehenderit voluptas repellendus sed quam iste quos ea. Vitae nostrum dolorum est. Eveniet dolore ab itaque. Quasi incidunt quos sed adipisci sed sequi laboriosam. Quod ducimus commodi totam error aspernatur corrupti reprehenderit. Officia culpa est quidem occaecati molestias labore. Maiores nobis nemo recusandae sapiente. Et hic explicabo culpa. Ab eius corrupti deleniti expedita placeat alias corrupti molestias. Minus unde iste. Nemo cum voluptatum. Quidem corrupti fugiat fuga incidunt quo placeat amet. Culpa officiis error mollitia quidem eligendi suscipit. Occaecati illum illo nam accusamus pariatur similique quos iusto ipsam. Unde sit dicta minus earum quasi molestiae. Aliquid illum suscipit enim sequi. Fugiat rerum ad eius tenetur similique reiciendis voluptatibus minus. Quaerat esse doloribus nulla velit repudiandae reprehenderit molestias. Nemo temporibus consequuntur.

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