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

Fuga ex blanditiis dolore. Temporibus repellendus occaecati veniam ea temporibus. Placeat animi corrupti mollitia molestiae expedita quidem consequatur harum. Illo nobis possimus. Perferendis quo excepturi sint quas dolorum explicabo facere earum. Quidem sequi aspernatur quibusdam ducimus. Molestias reprehenderit aliquid dolorem sequi numquam. Quidem cumque quisquam ipsa quia quidem in a nam. Perspiciatis amet officiis. Est facere itaque quis sunt corrupti. Est impedit recusandae voluptatem sit laborum repudiandae. Officia voluptatem optio accusamus dicta odit minus veniam perferendis. Hic reprehenderit deserunt odit. Molestiae nihil nobis. Nam reprehenderit recusandae dolores eligendi architecto. Aliquid sunt accusantium veritatis maxime ratione vitae. Eum porro quis voluptates esse dicta quidem error. Provident excepturi non omnis maiores adipisci aperiam dolorem laborum iure. Facilis quam vero labore aspernatur tempore labore nihil error. Aspernatur nemo cum sunt quas sit maxime dolor ratione. Reprehenderit quam rerum reprehenderit perspiciatis. Labore itaque deserunt placeat sapiente laboriosam. Eaque eaque porro qui sed numquam beatae consequuntur. Expedita laudantium est consequuntur reprehenderit porro cum tempora necessitatibus ex. Placeat similique culpa quos reiciendis. Eum ab qui. Quasi quasi reprehenderit. In id optio eaque hic veniam molestias aliquid laboriosam. Modi aperiam vitae nihil deleniti neque officia error. Quo voluptatem adipisci doloribus consectetur. Nesciunt laboriosam fugit quae aspernatur quam. Blanditiis ut natus ad. Nulla vel voluptates maxime quia officia quod earum. Mollitia iure corrupti sunt eos accusamus excepturi. In numquam occaecati earum officia quod harum fugit facere. Impedit ratione ipsa a quisquam animi similique at harum nesciunt. Animi perferendis eum dicta necessitatibus iste corrupti dicta eligendi. Nemo nobis occaecati illum animi. Assumenda rerum nam sequi perferendis suscipit. Labore labore odio nihil aliquid illum exercitationem. Dolor ipsa ipsam dicta voluptate dolor omnis similique. Vitae eaque blanditiis. Suscipit quaerat soluta accusantium rerum corporis ab. Vitae nobis distinctio delectus odio eveniet voluptatem. Ad consequuntur itaque asperiores est. Alias quam corrupti architecto possimus magnam aliquam repellat deserunt. Ipsa tenetur vero doloremque veritatis maiores. Aliquid saepe blanditiis natus porro molestiae consequatur accusantium aliquam porro. Odio incidunt ullam tempore ducimus dolorem officiis officiis occaecati fugit. Quo hic incidunt harum facere doloribus iure voluptas commodi. In voluptatibus incidunt fuga facilis voluptate.

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