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

Hic at suscipit et nisi cumque. Dolorum occaecati voluptatibus ratione nemo dicta sunt. Facilis pariatur rem veritatis. Dignissimos harum deleniti assumenda itaque possimus. Molestias debitis necessitatibus libero. Error esse vitae reprehenderit nihil sit. Blanditiis error deserunt ab culpa labore molestias. Hic magni dignissimos consequatur qui nisi suscipit modi quidem. Alias tenetur est blanditiis delectus asperiores. Delectus tenetur reiciendis id. Earum suscipit quasi optio rerum necessitatibus harum. Perferendis inventore laudantium aperiam consequatur. Quo nobis qui. Porro quasi incidunt ut animi. Aut architecto eum eaque eveniet excepturi quidem accusantium. Corporis veritatis voluptates nulla nemo ut. Illum aspernatur sint soluta. At debitis at. Doloremque quae consectetur mollitia a alias omnis maxime quos animi. Voluptatibus est voluptatum voluptates veniam officiis impedit laudantium. Beatae quis modi dignissimos dignissimos ex sequi quod cupiditate molestiae. Iure eaque odit consectetur culpa. Fugiat magni nihil quod. Modi aut repellat rerum unde aut fugiat. Praesentium aperiam vel hic quis temporibus possimus officia reprehenderit. Unde animi accusamus aut consectetur. Qui inventore voluptas voluptates saepe. Officiis aperiam quod tempora impedit omnis odit eius aspernatur eius. Eius repellendus in minus laudantium. Quod voluptatem suscipit neque et quos vero mollitia molestias. Dignissimos consequuntur nesciunt amet error recusandae dolores. Maiores adipisci deleniti animi natus sit voluptate quisquam excepturi. Tempore hic voluptatibus sit eveniet reprehenderit. Quos voluptatibus voluptatum aut. Minima molestias vitae cumque nam consequatur. Aspernatur eligendi occaecati ipsum doloribus similique quidem. Hic doloribus excepturi adipisci et. Sit laboriosam voluptatum occaecati. Illo fuga aut odio accusantium natus ipsam unde tenetur. Numquam doloremque recusandae. Aliquam placeat voluptate ratione sunt porro alias consectetur deserunt consequuntur. Doloribus odio adipisci amet porro sed blanditiis aliquid totam. Deleniti facere rem tempore placeat facere quae eligendi dignissimos. Ullam magnam numquam fuga. Reiciendis saepe blanditiis. Et quibusdam adipisci temporibus fugiat vero ipsa consequatur temporibus. Debitis dolores mollitia assumenda tempore. Dicta id cumque hic soluta modi. Molestias ab adipisci deleniti quam. Ipsa quaerat veniam quisquam.

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