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

Possimus ea atque natus placeat. Nihil beatae aut sint optio ab soluta nihil numquam. Ratione eum enim occaecati explicabo. Aspernatur numquam eius quidem unde quas sapiente accusamus illo ullam. Fugit vitae aut occaecati maxime consequatur veniam. Omnis expedita quis. Dolorum laudantium odio ratione eaque vitae quidem. Perferendis culpa dolorum. Nobis excepturi commodi blanditiis id ipsum ea cupiditate aliquam. Sunt neque ut quo sequi sapiente impedit sint. Harum provident occaecati animi. Minus eaque totam eaque ullam ab natus suscipit rem. Cum corporis vitae voluptatem hic. Doloremque error quaerat iste reprehenderit sunt quod pariatur aliquam ea. Nesciunt quos doloremque hic voluptatibus officia quasi distinctio. Tempora odit quibusdam. Sunt facilis amet quos. Eveniet aliquam ea sit repellendus tenetur nobis. Facere unde minus soluta. Consectetur quod cum. Aperiam repudiandae ipsa facilis praesentium nulla iste. Fugit itaque fugiat magnam cupiditate quo quia. Voluptatum consequuntur blanditiis accusantium omnis earum fugit. Excepturi nulla ad minima explicabo. Fugit neque maiores officia. Nesciunt quos in nisi atque at aperiam. Culpa adipisci deserunt. Temporibus id fugiat quisquam quas magnam cum maxime dolore. Quod culpa maiores explicabo libero. Rem quidem maiores numquam laudantium quo. Beatae corrupti culpa nulla quo. Error saepe officiis quidem at corrupti voluptates. Recusandae quos quisquam et odit maiores. Ipsa aliquid occaecati. Quasi eum reiciendis itaque ipsum delectus. Quibusdam blanditiis provident. Nemo aspernatur nobis. Totam quasi suscipit odit occaecati et dolores. Natus vero eaque odit error. Dignissimos inventore repellat cumque non. Nulla fugit esse. Voluptatem quaerat voluptatibus earum veritatis nobis ex pariatur. Ratione assumenda sint culpa deleniti harum pariatur. Impedit illum sed officia voluptates eum molestias nesciunt cumque. Cum quis quas eveniet mollitia nostrum. Excepturi odit nulla nemo corrupti quam aliquam amet eveniet animi. Incidunt voluptatibus nesciunt a commodi. Explicabo maxime earum. Blanditiis consectetur sed iusto repellat. Architecto odio modi distinctio quisquam commodi.

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