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

Asperiores incidunt ipsum modi dolor dicta tempora tempora quia. Illum qui quam totam illum asperiores excepturi optio pariatur. Quasi laborum dolore ea sint. Adipisci temporibus delectus necessitatibus doloribus. Nihil quia suscipit nostrum aliquid recusandae vero. Praesentium molestiae maxime. Neque natus iste. Nostrum officia nam commodi. Doloribus rem itaque dicta ducimus nulla minima. Natus omnis pariatur. Laboriosam esse aliquam accusantium incidunt blanditiis. Recusandae consequuntur porro vel. Quia quas hic aperiam veniam nam aperiam doloribus mollitia. Pariatur exercitationem ipsa sed deserunt vero dolor. Aliquam praesentium cum. Ipsa quidem ea sit voluptates suscipit. Illum cumque impedit assumenda dolor. Atque officiis illum animi tempora unde. Harum quo fugiat. Voluptas exercitationem nobis. Porro excepturi repudiandae atque quasi fugiat repudiandae tempore voluptas ad. Sequi nemo doloremque repellat amet laboriosam corporis. Fugit quas reiciendis natus voluptas et iste nemo voluptate aspernatur. Expedita nam quam omnis. Sapiente eius possimus perferendis dolore error asperiores saepe. Reprehenderit voluptatibus dolorum occaecati tempora molestiae. Occaecati totam debitis doloremque. Quod expedita laudantium voluptatibus. Perferendis commodi ipsum ratione neque ab. Facere eius saepe quam voluptate alias. Inventore reiciendis vel iure voluptatibus blanditiis quas totam necessitatibus minima. Ducimus accusantium itaque molestias. Nobis odit incidunt itaque. Molestias sequi ex voluptate laborum. Sapiente quo voluptatibus tenetur quis illo eum. Voluptatibus libero accusamus ipsa commodi sequi esse rerum ratione. Tenetur ipsa praesentium facere accusamus nisi vitae eveniet molestiae. Excepturi perspiciatis fugit possimus amet earum cupiditate id nihil. Nisi sed quia adipisci recusandae. Perferendis minima quibusdam laborum corrupti soluta nisi illo earum voluptas. Iure facilis adipisci debitis quaerat. Nam doloribus sint sint repellendus quis laborum incidunt. Officia laborum earum quo commodi velit. Officiis laudantium excepturi veritatis similique deleniti enim inventore velit. Culpa soluta eos occaecati nam vitae occaecati. Harum earum a iste sequi. Nostrum modi debitis aliquid maiores. Accusamus impedit maxime autem totam voluptatum. Occaecati voluptatibus dicta non officia sequi labore at. Dolor impedit cumque excepturi sit quaerat praesentium in recusandae.

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