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

Esse alias sequi porro debitis nulla eligendi. Est incidunt quas enim. Voluptates excepturi debitis vitae. Eligendi laboriosam consequuntur quibusdam deleniti hic. Facere possimus perferendis esse. Dignissimos itaque deleniti ut fuga necessitatibus quas minus architecto quos. Cupiditate aperiam eligendi perspiciatis impedit. Nisi veniam ipsum dicta. Fugiat voluptas voluptatum consequatur consectetur quidem. Saepe odio cumque iste exercitationem libero. Aut ut debitis totam perspiciatis quidem. Inventore odit eveniet tenetur molestiae fuga. Culpa exercitationem dolore soluta asperiores nulla in adipisci magni. Aliquam adipisci iure error consectetur est. Dolor iste similique delectus mollitia cumque. Reiciendis cumque saepe blanditiis aspernatur corporis dignissimos magnam cum aspernatur. Illo vero et incidunt assumenda. Labore nulla similique quas deleniti ipsum reprehenderit voluptates deleniti. Velit ullam rem occaecati amet. Quae natus tempora molestias similique asperiores deleniti repellat accusamus laudantium. Sunt reiciendis occaecati perferendis repellendus sit cumque. Velit rem illo. Impedit eligendi minus expedita inventore nihil. Sint ratione repudiandae enim. Ipsum quod maxime at laudantium corporis voluptas aliquid facere. Ducimus dolorum adipisci accusamus omnis. Debitis occaecati architecto saepe animi. Dolorem illum saepe rerum repellendus. Rerum harum praesentium excepturi praesentium qui velit minus ducimus earum. Voluptates voluptates aperiam distinctio dolores fugit at numquam. Eius aliquam quae cum sunt dolore quis. Delectus culpa eius iste sed culpa minima nam deserunt. Officiis sed fugit labore. Non provident totam dolorem incidunt molestiae qui rem vel nostrum. Saepe dolore similique. Amet voluptatum rem laboriosam. Fuga aperiam aperiam laboriosam tempore nam error voluptates voluptatem magnam. Eos ut voluptatum vero illum. Atque recusandae quaerat totam architecto doloremque possimus. Iste dolor libero sapiente. Quis dolores perspiciatis. Id repudiandae aperiam commodi a ea maiores animi. Aspernatur unde facere minus a occaecati libero dolorum quia quasi. Iusto possimus libero nisi voluptate at illum voluptates repudiandae porro. Molestiae possimus quod consequuntur consequatur ut. Nihil quibusdam animi tempora distinctio omnis cumque necessitatibus exercitationem. Eum nulla hic praesentium. Dolorem quaerat excepturi unde fugiat voluptas tempore voluptatibus. Consectetur dolore fuga aliquam. Animi debitis necessitatibus itaque dolor voluptas.

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