Built-in CSS support
How it worksAnchor link to section titled "How it works"
You can build with Tailwind's library or use other methods of styling like vanilla CSS or CSS Modules. All CSS that's imported in the app is extracted as a single asset at build time.
Tailwind is a CSS framework that is composed of classes. It offers developers a set of guardrails by providing a limited set of spacing, color, and responsive layout utilities.
Styling componentsAnchor link to section titled "Styling components"
The following example shows Tailwind classes in use:
Human-readable class namesAnchor link to section titled "Human-readable class names"
Tailwind utility classes are concise, yet human-readable. For example,
block in Tailwind is the same as
display: block in CSS.
Customizable classesAnchor link to section titled "Customizable classes"
Tailwind utility classes can be customized to meet your needs. For example, you can define different shades of blue in a configuration file so that when Tailwind classes are generated, your custom shade of blue is used. This allows you to keep Tailwind’s pre-defined utility classes without requiring other developers to learn all of your color variables.
Autocompleted class namesAnchor link to section titled "Autocompleted class names"
If you use Tailwind with Visual Studio Code, then you can see a preview of the color palette and what CSS properties the class name will apply.
Remove TailwindAnchor link to section titled "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:
- Delete all the code in
- Remove Tailwind from
- Remove Tailwind from
Run the following commands:
Custom fontsAnchor link to section titled "Custom fonts"
If you want to use a font that's not included in Shopify's font library, then you can use fonts from third-party solutions such as Typekit:
- Add font files inside the
/publicfolder. For example, add font files to
.cssfile that loads the local custom font and reference the font with
index.htmlor any desired client component.
Hydrogen collects styles for each CSS file imported in your client and server components.
You can modify the following modes for CSS support by passing
experimental.css option to the Hydrogen plugin in
modules-only: Enables limited support for CSS Modules only. This is the current default mode.
global: Enables full support for vanilla CSS and CSS Modules.
globalalso enables a way to integrate with tools that provide CSS-in-JS at build time. This is the recommended mode.
Vanilla (pure) CSS and extensionsAnchor link to section titled "Vanilla (pure) CSS and extensions"
Once enabled, you can import your stylesheets directly in your server components:
CSS ModulesAnchor link to section titled "CSS Modules"
Hydrogen collects styles for each CSS Module in your components. CSS Modules can be imported in both client and server components.
When the CSS mode is
modules-only, styles are inlined in a
<style> tag before your component. This tag is only added automatically for the default export in the file. Consider using the
global CSS mode to support named exports and reduce code duplication.
CSS-in-JS librariesAnchor link to section titled "CSS-in-JS libraries"
Hydrogen supports CSS-in-JS libraries that emit
.css files at build time via third-party Vite plugins. Please reach out to the library maintainers to ask for React Server Components support, and feel free to tag the Hydrogen team (
However, CSS-in-JS libraries that collect styles at runtime aren't currently supported due to limitation integrating these libraries with React Server Components.
- Explore an example implementation of CSS Modules in GitHub.