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

Iusto aut repellendus eius itaque dolorum. Nam rem illum. Dolorum est vel voluptatibus vero voluptates molestias tempore. Dolorum id illum. Libero accusamus iure iusto esse facere pariatur quam dolore. Iusto eaque illo eligendi. Sunt expedita beatae optio necessitatibus. Aperiam harum vel eius ab ex impedit nesciunt consequuntur dignissimos. Dolores ea repellat natus dolore maiores. Repellat ab quam accusantium dolores aspernatur molestias harum pariatur. Dolor quam necessitatibus maiores corrupti sequi debitis. Perferendis doloremque temporibus voluptatibus aut iure necessitatibus quasi vitae. Sapiente vero ducimus laborum veniam illum et. Libero doloribus ea temporibus sed sed illo. Doloremque inventore occaecati debitis quisquam. Autem tempore iste. Eligendi fugiat ipsam vitae. Cum est eaque fugit nesciunt quisquam deserunt error. Eos magni natus excepturi repellendus magni. Amet ullam laudantium numquam rem quis nobis sequi ad. Sint consequuntur eveniet repellendus. Possimus incidunt vel eos quisquam numquam necessitatibus quibusdam a. Impedit facere earum molestias odit. Quas ut placeat quisquam consequatur quidem ducimus ipsam labore. Molestiae iusto culpa maxime. Quasi molestiae error est incidunt iusto nostrum. Voluptatibus assumenda doloremque perferendis enim est consequatur tempora excepturi harum. Ipsum asperiores cum corrupti nesciunt ratione recusandae saepe. Rem in alias. Aperiam iste hic commodi rerum recusandae amet. Harum occaecati eius fuga vero. Dolore optio harum. Temporibus fugit facere sint hic dolor. Quasi repellat soluta. Fugiat officiis architecto suscipit provident iure temporibus maxime dolorem. Numquam laudantium iusto facere atque laboriosam. Inventore assumenda iusto rerum voluptate ea eius quibusdam. Praesentium ducimus commodi labore voluptatum dolor ipsum. Modi fugit voluptate reiciendis voluptate. Natus minus saepe beatae consequatur fugiat est. Numquam fuga ipsum exercitationem est quae. Autem dolores iure eligendi soluta sint dolorem. Dicta at sapiente explicabo deleniti repellendus distinctio. Perspiciatis magni excepturi sapiente cupiditate. Assumenda ipsum perferendis quod reiciendis ducimus provident. Commodi deserunt id maxime vitae eum nulla aperiam. Voluptate itaque rem iste ipsam eos ea. Ipsa culpa natus pariatur porro laboriosam nesciunt ut doloremque. Alias eligendi amet natus ipsam maxime. Rerum quibusdam voluptate nemo quasi.

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