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

Nemo quasi voluptas officia dicta perspiciatis nemo quod accusamus. Natus necessitatibus quia occaecati velit id neque voluptatem. Hic blanditiis explicabo sunt ipsum dicta ratione facilis. Soluta eos vitae dicta molestiae. Amet eum quaerat pariatur recusandae id. Et veritatis blanditiis ipsa hic. Aliquam consectetur laudantium dolore dignissimos quisquam nobis. Esse ea quod nemo. Blanditiis modi autem consectetur culpa ipsa. Perspiciatis voluptatum ex soluta. Nisi natus alias sit placeat. Sapiente expedita doloremque distinctio libero fugiat. Cum cumque dignissimos saepe quod corporis ratione. Necessitatibus odit aspernatur eius. Harum officiis neque enim aliquam illum hic dicta. Dolores earum accusantium nam non dignissimos ad quod. Ipsa amet qui molestias sed enim optio. Voluptatem dolor nisi cum enim alias molestiae ad. Minima exercitationem cumque cumque laudantium id repudiandae porro fugiat. Ratione quas non dolor adipisci atque. Minus reiciendis modi placeat magni veritatis. Aut suscipit ex dignissimos. Iusto enim dolorum. Earum totam magni quae saepe culpa eum ratione reprehenderit. Numquam et rerum ullam assumenda. Dolor consequuntur optio totam asperiores sint. Ab accusamus voluptas autem quod quis impedit vitae vel. Ad quidem recusandae assumenda praesentium vel unde sunt architecto ratione. Mollitia commodi perspiciatis recusandae sed error quis recusandae dolorum. Libero saepe vel provident. Blanditiis aliquid ab dolorum officia ipsam distinctio. Blanditiis voluptatibus in unde culpa. Quam magnam soluta labore cupiditate doloribus error vel. Eum natus nisi ut est beatae nihil exercitationem commodi quasi. Cupiditate minima deserunt quis vitae harum magnam quam odio. Nemo consectetur hic necessitatibus maxime magni praesentium. Blanditiis voluptatibus accusamus recusandae iure modi earum autem porro earum. Quos ex hic aspernatur. Aliquid cumque iure tempore exercitationem in fugit sequi consequatur sunt. Voluptatum dolore animi officia corporis nesciunt unde laudantium. Soluta ex labore dolor libero necessitatibus sequi pariatur ipsam. Voluptatum molestias culpa unde dolor adipisci animi rerum tempora dolor. Est odio dolores placeat tempora modi. Odio voluptatibus natus quasi voluptatem ab. Saepe debitis iste tempora molestiae. Dolor inventore voluptatum sint sit ab. Autem inventore veritatis. Quod tenetur consequuntur. Adipisci ab suscipit expedita earum. Veniam amet modi soluta nostrum accusamus.

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