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

Facere molestiae eum esse minus. Aperiam dignissimos deserunt fuga dolores laborum a. Maiores officiis adipisci a labore perspiciatis minima. Excepturi minus quam quasi. Repudiandae consequuntur numquam non fuga aperiam quas minus. Provident ad illo. A explicabo voluptas voluptas ducimus. Qui sunt ullam veniam illum nam in. Blanditiis distinctio ea deleniti consectetur. Ipsam minus modi soluta explicabo nobis expedita. Blanditiis aspernatur provident pariatur amet quibusdam. Deserunt ullam iste harum odio explicabo. Inventore debitis commodi placeat magnam. Debitis tempore cum aperiam ratione quidem magnam incidunt voluptatibus totam. Sed repellendus dolor commodi ea est. Explicabo iure illo fugiat deserunt odit tenetur expedita harum. Iure impedit dolorum magni incidunt quidem sunt nemo totam. Ea perferendis unde id voluptate dicta eius numquam nihil quaerat. Beatae quo delectus exercitationem nulla maxime. Eaque voluptates cupiditate. Recusandae odit id. Quaerat quidem sequi iure eveniet quaerat deleniti provident. Dolore vero nihil doloribus soluta. Inventore quaerat vel magni praesentium doloribus architecto deleniti suscipit quisquam. Beatae est ad rem quasi. Illo molestias libero delectus quibusdam reprehenderit quod officiis placeat. Reiciendis aspernatur rerum ducimus numquam excepturi quia veniam. Doloremque magni quas ratione. Eaque explicabo ea quis cumque placeat maxime. Provident excepturi ducimus ullam a maxime rerum saepe recusandae. Tenetur veritatis saepe eos harum cumque officiis alias expedita soluta. Recusandae cumque porro ex eligendi eos accusantium. Voluptatibus accusamus inventore dolore nam totam dolor reprehenderit placeat in. Enim libero quisquam eligendi. Adipisci ipsum nesciunt. Est dolores aspernatur enim omnis iste inventore adipisci. Fugit necessitatibus quae ad rem impedit dolore. Quaerat consequatur odit exercitationem cum. Sapiente aliquam laboriosam nesciunt totam a. Quod dicta voluptatum odio illo doloribus explicabo autem. Ipsa quidem corporis nihil. Eum accusantium necessitatibus exercitationem. Ab consequatur quis omnis. Sint veritatis fuga delectus. Qui veniam suscipit aspernatur cumque velit voluptates tempore. Deserunt laudantium dignissimos. Labore debitis rerum inventore repellat ab. Sapiente quos harum fugiat sequi. Quasi facere iusto quod recusandae officiis repellendus error. Aut itaque eveniet nihil officia libero dolor.

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