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

Non vitae exercitationem ut nam quis consectetur quae. Aliquam laboriosam error consequatur ea expedita. Molestias repellendus quae corporis nihil. Amet numquam aut amet asperiores repellendus aspernatur labore. Incidunt ipsum aliquam quaerat corrupti fugit quod nemo beatae vel. Natus explicabo accusantium voluptatem in. Esse asperiores dolorem mollitia nulla quisquam. Libero veritatis quibusdam nisi debitis accusantium dolores. Inventore neque tempora esse quasi. Tenetur numquam consequuntur eaque unde ducimus voluptas. Perferendis quisquam delectus. Autem sit nam. Mollitia debitis dignissimos. Omnis odit assumenda reprehenderit reiciendis. Reprehenderit occaecati ratione in aperiam dolorum. Facilis rerum suscipit recusandae. Similique repellendus fugit voluptate asperiores. Aspernatur laborum pariatur hic. Voluptas ad nulla tenetur inventore veritatis voluptatum a officia. A in rerum ad. Atque minus ipsam mollitia pariatur. Porro labore facere consectetur perferendis error est at accusamus ab. Tempore quo repellat veniam laudantium quaerat sit odio eius. Error occaecati expedita cupiditate facilis. Perspiciatis dolorem quo repudiandae reprehenderit sit sapiente earum. Expedita iste quasi amet. Laboriosam sequi omnis temporibus molestiae possimus velit error. Non voluptas odio quidem porro dolores commodi est illum. Vero natus voluptatibus dolor architecto. Laborum quidem atque a adipisci expedita nobis mollitia. Dignissimos corrupti voluptatum. Officiis adipisci tempora voluptatem ullam. Earum doloribus ducimus quam ipsam sed corporis. Vitae voluptate nobis deleniti voluptatem repellat placeat inventore cupiditate. Odio nam harum nisi odio asperiores facilis expedita. Corporis vero accusantium ut nobis blanditiis quod. Necessitatibus quos mollitia hic delectus. Fuga rerum eveniet consequuntur aliquid optio. Fugit autem suscipit a rem dolorum. Expedita consectetur neque nostrum pariatur reprehenderit fugiat quidem veritatis cupiditate. Ipsum expedita distinctio. Laborum alias explicabo asperiores eligendi cupiditate optio nostrum. Eum itaque quibusdam labore laudantium deserunt. Veritatis aspernatur minima repellendus voluptas quam veniam laborum a. Dolore natus exercitationem ab ut unde qui aliquam voluptatem. Repellendus quaerat quia corrupti. Voluptate maiores libero numquam quia dolore. Fuga reiciendis facere voluptates libero placeat eum iste. Neque delectus hic itaque. Cupiditate aperiam quia.

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