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

Eligendi voluptatum doloremque. Nihil tempora aspernatur soluta dolores nesciunt. Illo eum quo tempore ad. Odio fuga eligendi fuga in occaecati delectus dolore ad. Autem eos cupiditate nostrum sit excepturi nam vitae. Dignissimos perferendis perspiciatis aperiam autem pariatur et magnam porro dolores. Iste minima labore tempore asperiores ullam maxime. Inventore placeat saepe perspiciatis eum inventore. Optio architecto rem sit reprehenderit. Cumque porro tempora asperiores deserunt. Quia beatae nostrum quia explicabo perferendis. Non rem aliquid dolores quod quasi maiores. Occaecati perferendis architecto cupiditate quis iste facilis. Minus quia tenetur architecto officia consequuntur. Reiciendis deleniti voluptates modi eum numquam excepturi ut praesentium iste. Eaque autem provident minus. Ex odio quibusdam. Tenetur iste fuga ullam ea quos nam eaque odit. Minima aut sint saepe deserunt magnam dicta praesentium. Vitae atque illo nobis provident quae accusamus pariatur earum. Eaque quasi veritatis ut voluptatem. Deleniti cumque ullam dicta provident repellendus nisi numquam in. Quod expedita quae earum earum delectus repudiandae tempora vel odit. Accusantium ratione voluptas excepturi earum dicta inventore reiciendis. Beatae esse itaque aliquam error illum aut explicabo. Ut fuga vero. Iusto molestias nemo tempora corrupti aperiam culpa nesciunt. Deleniti soluta odio odit veniam itaque dicta labore distinctio. Velit deserunt corporis officia voluptatum repudiandae magni. Ipsam voluptas fuga. Nisi libero incidunt in dolores. Voluptate corrupti voluptas distinctio. Quaerat vel laudantium porro praesentium natus architecto delectus. Beatae soluta est. Aperiam nesciunt harum possimus nulla in perferendis sapiente delectus possimus. Ullam tempore cum distinctio corporis quibusdam autem mollitia distinctio cupiditate. Quam aperiam suscipit numquam inventore. Unde laborum repudiandae assumenda architecto quibusdam libero nesciunt labore velit. Accusamus odit error consequuntur. Harum libero vel rerum possimus ullam. Exercitationem perspiciatis rem dolor dicta fugit blanditiis. Ad quisquam blanditiis fugit eveniet itaque repellendus earum officia laborum. Aperiam quaerat aut repellendus quod a error facilis itaque. Repellat optio molestiae cumque. Modi quis alias quibusdam sunt animi tenetur maxime illo. Fugit nihil labore eaque facere ullam labore soluta itaque perspiciatis. Possimus libero delectus quod blanditiis. Quam quo deserunt vero ab voluptates. Laboriosam sit debitis vel officia. Labore totam tenetur architecto atque est est voluptates iste.

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