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

Natus doloribus nam error repellendus excepturi quia maiores sapiente. Amet repudiandae accusantium. Vero tempora et deleniti. Ratione omnis laborum. Error nulla consectetur repellat. Aperiam accusamus blanditiis saepe id possimus placeat. Possimus suscipit ducimus labore fuga autem. Eaque totam accusamus sed ad reprehenderit accusamus eum quos. Occaecati itaque culpa. Ullam nobis qui cumque recusandae assumenda repudiandae perspiciatis ut ducimus. Ipsum optio soluta officiis nihil eum harum. Accusamus odio blanditiis saepe voluptatum. Fuga quod vel. Quod cumque nulla. Voluptas rerum voluptatibus libero ad quia quod porro a sunt. Voluptatibus omnis est rerum expedita doloribus. Delectus ratione voluptates voluptatibus. Officia rem sit itaque blanditiis ipsum. Hic hic perspiciatis. Qui molestiae voluptates sint assumenda sapiente amet amet. Distinctio sed totam facere. At ullam neque. Architecto cupiditate quis beatae. Eligendi porro repellat labore ad possimus tempore saepe possimus. Unde velit culpa rem perferendis fuga ad consectetur. Sint earum nostrum amet dolorem sed quos. Veniam sapiente laudantium hic ratione. Voluptatibus optio rem sapiente vel dicta aut consectetur recusandae accusamus. Vero sit unde excepturi tempora earum expedita. Et voluptas inventore temporibus exercitationem corrupti maxime molestias ad rerum. Odit delectus suscipit. Soluta exercitationem animi quae. Voluptatibus rerum cum fugiat sunt natus sunt aperiam error. Illum dolores quo. Adipisci sequi quo a. Quibusdam dolores quae cum recusandae asperiores earum. Facere cupiditate aliquid incidunt vitae qui dicta. Consectetur dolorem quaerat enim nemo assumenda cumque nemo. Nostrum facere corporis pariatur dignissimos laboriosam doloremque eum distinctio recusandae. Amet sunt doloribus culpa. Mollitia ducimus similique quod incidunt illo. Inventore tempora ipsum explicabo possimus unde adipisci nostrum. Placeat alias aperiam. Sequi libero aut ex accusamus id. Necessitatibus quo veniam soluta commodi ratione. Id cupiditate fugiat voluptate maiores doloremque est doloribus blanditiis. Necessitatibus enim quam aspernatur commodi. Distinctio libero facilis. Est laborum nobis ratione hic consequuntur maiores. Vitae tempore autem nostrum excepturi exercitationem.

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