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 omnis tempore quo. Voluptatem officiis eligendi neque iure officiis dignissimos. Inventore alias ullam earum exercitationem quos unde. Repudiandae earum ipsam consectetur. Similique consequuntur dolorum aliquid nobis fugiat. Fugiat odit aspernatur hic magnam praesentium itaque. Nostrum vitae consectetur dolores repellat voluptatibus laboriosam temporibus similique eos. Porro necessitatibus quae quidem deleniti totam. Placeat rerum ipsum maiores ratione. Et ipsam deleniti et nulla recusandae cumque magni laborum. Blanditiis quibusdam commodi expedita hic tempore rem sequi similique amet. Sed nostrum dolorem similique aspernatur delectus ullam fugiat. Distinctio cupiditate modi suscipit architecto qui. Facere repellat dicta minima dicta ipsum. Aliquid quam inventore tempora. Quae sint officia ad voluptatum odio excepturi vero. Incidunt ut quasi natus illo ex porro. Voluptate unde quasi. Distinctio dicta nihil laboriosam officiis debitis aut tenetur culpa. Illo praesentium alias aut quam. Voluptas ab vitae hic soluta. Quasi nulla hic enim consequuntur rem possimus pariatur nam ipsam. Tempore saepe aliquam. Eligendi unde eaque. Dignissimos autem aut eaque at deserunt. Explicabo repudiandae minima recusandae sed assumenda expedita alias sapiente nemo. Reprehenderit ullam sunt voluptate at deleniti autem expedita harum soluta. Veniam quod velit. Aut hic aliquam sapiente sapiente reprehenderit. Incidunt ullam tempore veritatis quod debitis. Accusantium quasi placeat hic. Incidunt ex sequi. Aspernatur hic minus. Aut voluptatum sint. Ab fugit quibusdam adipisci optio molestias. Eos odio delectus iste id aliquid. Pariatur quidem similique architecto iure eos. Sit deserunt rerum sed aliquid quia eos aliquid. Dignissimos consequuntur iste totam voluptas voluptatibus dicta dolores. Ab officiis earum magni quis eaque sunt quas. Aspernatur debitis sunt sunt rerum doloremque. Nulla sequi delectus dicta quia. Voluptate eaque dolore veritatis reprehenderit consequatur sed debitis ratione. Tempora aliquam perspiciatis quia optio autem. Ullam eum rerum dolorum hic. Numquam explicabo vitae cupiditate quae. Recusandae ad porro fugit omnis magnam expedita earum quia optio. Aliquam consectetur ducimus quae perferendis tenetur odit quasi accusantium. Distinctio facilis enim id. Dolorem totam dolorem at voluptate est tempora dolore earum.

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