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. If you don't want to use Tailwind, you can remove it
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.
Custom fontsAnchor link to section titled "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.