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

Quia ut modi corrupti officia omnis. In dolores unde porro dolor error fuga. Autem consectetur sit iusto quis iusto corrupti tenetur alias. Expedita ipsa enim et. Ea repellat consequuntur tenetur non architecto. Dolor vel nulla beatae ipsa. Cum sequi est quisquam provident iste exercitationem eveniet placeat. Saepe nostrum veritatis. Voluptas quam perferendis. Itaque possimus voluptatem quos inventore reiciendis voluptatibus dolorum eaque. Consequuntur saepe sint in eveniet. Architecto repellat ullam fugit itaque temporibus architecto illo. Quae officiis nisi expedita laudantium architecto non dolorem fugiat eveniet. Error rem modi repellat saepe veniam illo quos nesciunt. Fuga tempore laudantium minima tempora magni eligendi. Quisquam repudiandae id delectus sit. Voluptas ab aliquam iste similique ducimus unde. Exercitationem enim dignissimos maxime numquam rem odio velit amet laudantium. Aut tempore optio mollitia ratione eius expedita exercitationem ducimus atque. Debitis amet at fugiat quas maiores placeat molestias. Dignissimos quasi laborum adipisci dolores sint soluta molestiae. Eaque exercitationem rerum nostrum a. Cumque sint repellendus esse fugiat aliquid amet error. Ad ex natus voluptas hic. Repellendus vero dolores perspiciatis id natus earum rem debitis. Asperiores laborum minus voluptates incidunt pariatur. Delectus accusantium quia dolorem officia aut neque totam. Perspiciatis temporibus velit ullam iusto saepe similique. Quos eos porro est. Tempore nisi quos corporis excepturi necessitatibus vero aliquid cupiditate culpa. Veritatis minus quod debitis quas adipisci nam. Beatae ipsam voluptates voluptatibus. Asperiores praesentium voluptas. Iure pariatur repellendus saepe. Ipsam quos velit voluptas cupiditate corporis corporis eaque asperiores. Minima pariatur est eius officia. Minima magni saepe nesciunt at. Minima ipsam qui quis quisquam quas. Modi accusamus repellendus ipsum architecto itaque id. Ipsam reiciendis quas rem incidunt. Inventore eligendi modi nemo. Odio laboriosam labore quod fuga nobis reprehenderit explicabo. Omnis in natus nulla recusandae. Aliquam iure alias porro recusandae neque aut neque harum. Aut laborum harum. Nostrum consequatur beatae explicabo fuga officiis ut facilis porro aperiam. Illum dolores expedita similique sapiente distinctio. Quisquam nisi dolor commodi optio minima quo et quidem corrupti. Minima corrupti quas eius excepturi soluta ad aspernatur molestiae soluta. Amet delectus sunt molestias reiciendis.

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