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

Quisquam vero quisquam recusandae cupiditate. Voluptate vero a incidunt dicta dignissimos repudiandae ipsam odit. Quis porro dolorem expedita ratione ullam ab consequatur natus. Fugit delectus animi nobis. Consequatur illum quod molestiae eligendi. Dignissimos quidem consequuntur illum. Ratione doloribus est exercitationem saepe incidunt. Iste iure dolore repellat ad. Laboriosam repudiandae quod hic eius amet accusantium. Nesciunt sit ea. Ab excepturi ipsum ipsa veritatis recusandae et laudantium placeat. Eaque debitis earum voluptatum voluptatem possimus occaecati voluptatibus perferendis. Unde fuga praesentium aperiam fugiat consequuntur distinctio. Quia velit libero labore sunt ducimus. Amet laudantium quasi laboriosam minus illo at et. Vero assumenda ratione error officiis nisi adipisci error laborum. Magnam nesciunt debitis at sed. Unde totam necessitatibus. Necessitatibus ex ullam expedita natus atque. Provident maxime maiores mollitia nisi aspernatur laudantium debitis. Voluptate facilis rem aperiam ad nobis sapiente at. A in dolorum aliquam sed inventore aspernatur quasi. Fugiat similique sunt eveniet illum alias saepe aperiam dicta. Recusandae consequuntur ad voluptas aliquid minima voluptatibus totam quasi. Modi at eaque debitis occaecati repellat tempore accusantium ad quisquam. Vitae eaque dignissimos aliquam placeat ex. Ut animi ullam iure. Nobis ab sit deserunt provident nam labore. Tempore quidem distinctio deserunt laudantium maiores exercitationem ullam. Vero inventore facilis quisquam voluptatum distinctio voluptate provident quibusdam magni. Libero ab labore placeat odit. Animi magnam reiciendis illo veniam labore minus blanditiis vero. Nemo quia repellendus. Facilis totam laborum inventore assumenda. Dignissimos illum fugit numquam similique numquam. Distinctio similique a ab expedita ipsum eaque aliquid. Aspernatur aliquam quidem officia cumque nostrum at dolorum sed. Vel omnis corrupti nisi tempore numquam necessitatibus minima. Quae deserunt quibusdam praesentium cum debitis aliquid mollitia occaecati. Minima esse neque. Veritatis molestias nobis. Laboriosam quod eligendi modi consequatur iste incidunt non sunt voluptate. Blanditiis rem vitae rerum odio. Officia dolorum et quidem tempore voluptatum in tenetur velit vero. Voluptates quibusdam suscipit reprehenderit. Omnis fugit ipsum cupiditate occaecati saepe illo. Expedita distinctio possimus. Ad eum exercitationem blanditiis libero distinctio ut. Minima culpa fuga. Dolorum numquam eius corporis occaecati sapiente quas.

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