Built-in CSS support
Hydrogen 2.0 is out now. These archival Hydrogen 1.0 docs are provided only to assist developers during their upgrade process. Please migrate to Hydrogen 2.0 as soon as possible.
Hydrogen's Demo Store template is styled using the Tailwind CSS utility library. This guide describes the benefits of using Tailwind and how to remove it if you prefer to use another CSS framework.
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.
Note: Make sure to import your stylesheets from a
*.client.jsxcomponent, or directly from
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. If you don't want to use Tailwind, you can remove it
The following example shows Tailwind classes in use:
<!-- src/components/Welcome.server.jsx -->
<!-- The text is centered. -->
<!-- The heading is larger than normal text, has a small margin below it, and is bold. -->
<h2 class="text-lg mb-4 font-bold">Hello, Hydrogen</h2>
<!-- The paragraph text is grey. Specifically, it’s the 600 shade of gray (100 is lightest and 900 is darkest). -->
<p class="text-gray-600">Welcome to your custom storefront. Let's get building.</p>
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.
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 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.
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. Learn how to create custom fonts
Hydrogen collects styles for each CSS file imported in your client and server components. You can modify the modes for CSS support.
- Learn how to modify the modes for CSS support.