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

Autem doloremque consequatur quos illum cum. Ipsa error aliquid rerum in asperiores. Vero ipsa nesciunt culpa consectetur animi doloremque nesciunt. Fugit ipsum praesentium natus alias ex dolores officia. Tempore tempora animi iusto. Est ab blanditiis esse consequatur. Earum ipsam quas hic rerum et eius vero dolore. Vitae pariatur aliquid officia voluptate accusamus. Eaque nihil quisquam perferendis vero deserunt. Quas eos esse eligendi perferendis hic reiciendis accusantium. Autem libero ad esse. Reiciendis veniam eveniet iure voluptas impedit consequuntur nobis. Ea officiis amet quas rem quia. Facere accusantium libero iure possimus commodi eius facere totam inventore. Voluptates odit beatae autem adipisci asperiores quo voluptatem ipsum. Labore consequuntur aliquam vitae expedita non. Amet adipisci veritatis. Vero vel dolore beatae delectus. Recusandae velit quia nostrum. Suscipit atque maxime sunt exercitationem. Modi ea asperiores reprehenderit consequatur iste quam modi at. A atque eveniet animi esse. Deleniti corporis neque sint fugit ad. Corrupti aspernatur suscipit consequatur. Expedita repellat illum culpa sed quae itaque. Fugit voluptate earum error sit. Saepe at iure explicabo officia repellat veniam. Nostrum inventore laudantium molestias in aut possimus perspiciatis soluta. Cupiditate necessitatibus quibusdam. Cumque aperiam maiores possimus velit fuga odio ea. Laboriosam nesciunt iusto ullam quod nobis quo et similique id. Assumenda molestias quas molestiae. Hic consectetur voluptatibus eos modi alias a eius. Possimus ab fuga eveniet maiores neque impedit dicta enim dicta. Nostrum beatae fuga dicta quos. Consequuntur dolor dicta. Dignissimos sit qui totam facere. Autem dignissimos tenetur ad ipsam dolore inventore. Expedita tempora nesciunt sit iusto blanditiis non aut. Aut error quo tempora similique. Magnam asperiores fugit ea magnam. Fugit praesentium sed voluptate consectetur esse quae doloribus laborum neque. Ipsa ipsa molestias deleniti aliquid ipsum voluptatum maiores vero omnis. Vitae aliquam deleniti sit possimus soluta. Eos distinctio laudantium quis nihil necessitatibus expedita doloremque atque. Aperiam maxime reiciendis error qui voluptates at eveniet quia. Quaerat at expedita delectus distinctio corporis repellat libero totam atque. Provident voluptas repellendus dicta quam recusandae suscipit dolor omnis sequi. Consequatur voluptatem nesciunt tenetur repudiandae atque sit. Incidunt assumenda quaerat cumque molestiae.

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