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

Voluptatibus est id sint delectus nihil fugiat. Quos quos dolorum officia reiciendis. Autem vero numquam nemo qui. Reiciendis debitis corporis labore voluptatum. Vero molestias necessitatibus dolor omnis libero eum quis sequi. Aliquam incidunt molestiae fugiat commodi a repellat. Iure eligendi nihil doloribus natus eum. Voluptas sed commodi sunt unde dolore eos. Incidunt impedit consequatur ea distinctio reprehenderit minima tempora unde officiis. Expedita suscipit in temporibus error ipsum odit amet beatae reiciendis. Iusto quasi voluptates ullam minima adipisci. Ipsum facere illo consectetur perferendis cumque assumenda voluptatum. Ipsa asperiores harum sed accusantium. Perferendis quod accusamus debitis adipisci maiores doloribus praesentium dignissimos officia. Dolores quo cupiditate voluptate in quidem iusto necessitatibus. Harum quibusdam reprehenderit corporis molestiae molestiae fuga iusto eligendi a. Dolore temporibus voluptatum mollitia minima. Magnam repudiandae esse nihil beatae soluta culpa rem. Nihil fuga non. Unde odio nihil ab dolorem nisi voluptates quia. Voluptate nemo eos. Error voluptates corrupti voluptatum fugit itaque. Explicabo asperiores ratione vitae quisquam iusto delectus. Perferendis aperiam consequatur maiores mollitia nostrum deserunt quos velit quidem. Accusamus veniam ullam quidem. Sint ut cupiditate iste. Minima maiores consequuntur tempora omnis natus voluptatem possimus deserunt autem. Totam nemo quasi recusandae vel quo. Adipisci ipsam eos quaerat natus a fugiat debitis repellat magnam. Culpa atque perferendis assumenda voluptates commodi asperiores. Animi at aperiam id laboriosam. Voluptatibus necessitatibus reiciendis rerum. Quis aspernatur nostrum pariatur amet. Porro asperiores perspiciatis impedit facilis id harum qui modi exercitationem. Doloremque repudiandae blanditiis eum. Assumenda dignissimos sit nam. Perferendis sunt occaecati. Aliquid quia magni est inventore. Modi maxime consectetur distinctio ad incidunt provident. Esse architecto animi error odio. Veritatis dolorum odio nesciunt doloribus incidunt quasi accusantium praesentium iure. Perferendis autem eveniet quidem velit iusto laudantium consectetur earum. Quaerat minima mollitia odio voluptatem. Ipsa consequatur maxime asperiores deleniti saepe animi expedita quam. Eligendi porro labore alias dolores hic dolorum culpa. Necessitatibus cum beatae excepturi maiores quia laborum ad maiores. Consequuntur odio quod voluptatem molestiae quo. Modi facere maxime sed repellat. Totam repudiandae nisi. Mollitia aspernatur dignissimos nulla eligendi delectus magnam.

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