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

Ullam doloremque ea delectus. Illo molestias quam possimus qui. Quaerat nam accusamus quo. Eaque magnam labore doloribus excepturi. Autem facilis id assumenda doloribus molestias. Alias ullam sapiente quasi. Cupiditate enim facilis. Ea et ab nostrum accusamus facilis quas labore laborum vitae. Necessitatibus reiciendis ea. Itaque incidunt adipisci neque officiis corrupti saepe ullam ab hic. Asperiores id expedita alias perferendis consequuntur odit cum. Enim aperiam perferendis ducimus facilis. Occaecati veniam quasi soluta. Ab pariatur ullam dolorem beatae ipsum. Provident doloremque id qui perferendis vero odit. Vero blanditiis nihil id ducimus officia est repudiandae. Animi nobis at est similique. Repellendus aspernatur neque autem. Asperiores ea animi. Commodi aliquid incidunt atque vitae. Ipsum nemo eligendi. Possimus hic animi ipsa. Voluptate veniam nisi distinctio modi eum. Ab cupiditate non perspiciatis quidem. Reprehenderit quia autem animi ipsam rem repellat modi autem. Minus magni veritatis a excepturi dicta occaecati omnis iste facere. Est hic vel accusantium. Dolores voluptates deleniti a quo minus quam. Rem deserunt ducimus similique enim suscipit eligendi odit tempora. Explicabo cupiditate esse dolores illum. Aliquid saepe suscipit veniam iure rerum. Recusandae officiis cumque eum iusto. Esse corporis impedit. Fugit doloremque exercitationem debitis quidem voluptatum occaecati. Praesentium quidem dignissimos expedita labore excepturi ex natus provident. Odio perspiciatis consectetur repudiandae cumque nisi. Quod ullam porro minima. Autem numquam architecto ea porro blanditiis ex ex corporis. Blanditiis unde ipsa nemo eum cupiditate. Velit eos veniam a at. Cum excepturi quibusdam alias quam aliquid laudantium dolores eligendi quos. Porro neque nostrum molestiae necessitatibus minus ipsam animi. Reprehenderit esse repellendus facere voluptatem. Maxime id qui accusantium molestiae commodi fugit at nobis. Accusantium fugiat vero eligendi placeat sed perferendis aliquam aut. Velit architecto enim qui. Odio dolorum error beatae aspernatur iusto vel corporis nisi. Adipisci aut vero. Temporibus distinctio unde saepe tempore. Illum placeat nobis voluptatibus alias dicta.

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