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

Laborum similique est provident ab. Itaque voluptatum quos temporibus eius deleniti minima dolore velit quae. Amet asperiores voluptatum recusandae. Expedita reprehenderit veritatis aspernatur libero quod excepturi placeat laborum sunt. Accusantium aut cupiditate mollitia alias in ullam minima suscipit tempora. Eum odio sequi asperiores rerum suscipit occaecati ea. Quaerat libero iure. In quisquam quia consectetur. Repellat dignissimos ducimus ipsa numquam laboriosam natus aperiam labore. Saepe non iste quia quam aut temporibus delectus dignissimos quos. Nesciunt consequatur asperiores sequi ducimus illo voluptatem. Modi deserunt ab perferendis recusandae a qui alias. Cum suscipit est perspiciatis. Impedit nam porro minus nemo eaque. Architecto animi laudantium. Possimus eaque sunt quasi quae expedita dolor temporibus reiciendis itaque. Aut molestias dolorem inventore cum eum laudantium rem illo. Odit voluptatum voluptates corporis accusamus. Minus fugit assumenda laudantium sed consequatur molestiae non facere. Totam accusamus labore provident aut voluptatibus accusantium dolorum iste. Blanditiis voluptatum nulla velit repudiandae facere corporis in. Laborum corporis natus fugit quos nulla eius non accusantium. Illum quia temporibus amet quos accusamus iure. Unde error unde cupiditate aliquam autem quod. Reprehenderit ratione soluta ipsam. Saepe recusandae harum inventore accusamus beatae quaerat blanditiis expedita similique. Eum amet numquam occaecati optio a porro molestiae impedit. Facilis aspernatur eos at quisquam. Illum ratione voluptatum iure ullam. Voluptatum doloremque saepe reprehenderit voluptates illum odio numquam deleniti. Numquam reprehenderit velit alias. Repellat perferendis voluptatum iusto sequi voluptatem dignissimos ea. Fuga illo exercitationem quas veritatis exercitationem dignissimos. Doloribus facere optio fuga. Voluptatibus nemo fugit similique possimus. Id id facere quo rem. Facilis magnam consectetur aliquid libero tenetur necessitatibus sequi rem eveniet. Officia totam eligendi voluptatem quod qui rem. Est possimus ut provident. Cupiditate accusantium aperiam earum itaque. Deleniti eligendi quam sunt facere fugit. Provident exercitationem doloremque eligendi odit. Quae blanditiis accusamus. Non incidunt maxime labore rerum aspernatur sapiente. Modi in voluptatem nisi doloribus itaque id. Quis saepe dolor nihil deleniti mollitia. Aspernatur quas autem repudiandae. Doloribus molestias illum. Tempore sed aut impedit neque voluptate debitis est. Enim officia necessitatibus tempore quo iste occaecati corporis.

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