Built-in CSS support

Hydrogen's quick start environment is styled using the Tailwind CSS utility library Tailwind CSS. This guide describes the CSS support that's built into Hydrogen apps and how you can customize your app's styles.

How it works

You can build with Tailwind's library or use other methods of styling like vanilla CSS files or a third-party CSS-in-JS framework. Hydrogen is powered by Vite, which natively supports several different methods of CSS injection.

Remove Tailwind

If you don't want to build with Tailwind's library and instead want to write your own CSS, then you can remove Tailwind:

  1. Delete all the code in src/index.css.
  2. Remove Tailwind from package.json.
  3. Remove Tailwind from postcss.config.js.
  4. Run the following commands:

Known issues with server-side rendering (SSR)

Some CSS-in-JS frameworks (for example, CSS Modules) might not work properly with SSR. Shopify is investigating how to support these frameworks in connection with React server components and streaming SSR.

Check back to read the official guidance as Shopify approaches a stable release of Hydrogen.

Next steps