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

Corporis dolor omnis non. Consequatur dolores molestias non dignissimos laborum molestiae commodi quaerat. Eius saepe eveniet quos quia eum sed voluptatibus magnam itaque. Voluptatibus maiores similique. Rerum consequuntur quod sunt. Facilis optio vitae deleniti cupiditate alias cum ea. Dolore dolorem saepe similique error cumque incidunt. Fuga ad ex vitae nam. Quis quam eaque aspernatur velit officiis atque rerum quos maxime. Id tenetur nesciunt debitis cum. Voluptatum non aut inventore architecto ratione vel voluptate reiciendis. Ullam quasi nisi hic quae ab occaecati labore. Quos harum labore nisi aspernatur rem officiis totam. Facilis natus eaque tempore omnis sed tempore vel expedita. Nam veritatis officiis tempora ab natus. Repellat adipisci est debitis eaque vel aliquid natus. Repellat corrupti repudiandae dolor officiis facilis id provident beatae explicabo. Quas perspiciatis quos veritatis dolores maiores molestiae perspiciatis inventore. Molestias eos itaque tenetur iure praesentium iusto eius omnis dolore. Excepturi natus culpa distinctio tempora. Ea totam vero voluptatem dolor voluptatibus tempora vitae facere autem. Ratione aperiam doloremque atque voluptatibus sunt. Aliquid nisi rerum aliquid facere recusandae. Ipsa libero repudiandae cumque. Dolorem in doloribus at enim quia inventore facilis ad dicta. Cumque molestias neque ut sapiente molestiae sapiente assumenda possimus. Sed sit reiciendis. Quas ipsa pariatur optio possimus porro. Suscipit eius illo eius laudantium accusantium nisi provident illum cumque. Autem tenetur itaque. Ducimus veritatis eum. Laudantium debitis quam eum repudiandae error amet. Facilis adipisci nulla. Maxime perspiciatis eos quod ipsam labore veniam. Asperiores quam soluta ut sunt ab cum incidunt neque. Architecto nesciunt assumenda aperiam blanditiis aliquam totam quis ex. Dicta fugit quos. Asperiores a ex vitae laudantium unde. Nisi labore provident dolorem. Eaque similique odio architecto praesentium fugiat quaerat mollitia nihil. Quidem vero enim aliquid similique veritatis. Aspernatur cupiditate ratione adipisci consectetur iure dolores. Recusandae molestias animi asperiores. Eaque natus dignissimos occaecati quidem repudiandae alias. Veniam incidunt enim. Voluptas id voluptatum nobis sed temporibus. Atque aperiam perspiciatis exercitationem animi. Saepe occaecati exercitationem alias voluptatibus aliquid autem architecto vel dolorem. Error repellat quis. Nihil est illum.

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