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 files or a third-party CSS-in-JS framework like CSS Modules. Hydrogen is powered by Vite, which natively supports several different methods of CSS injection.
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:
CSS ModulesAnchor link to section titled "CSS Modules"
Hydrogen includes a Vite plugin that collects styles for each CSS Module in your components. CSS Modules can be imported in both client and server components.
The CSS Module is inlined in a
<style> tag before your component. Currently, this tag is only added automatically for the default export in the file. If you want to render the styles in other named exports, then you must do it manually by rendering
- Explore an example implementation of CSS Modules in GitHub.