Overriding CSS from Modules

This document is for Hyvä 1.3.x and earlier.

This page describes how to override module CSS in Tailwind v3 based project (Hyvä 1.3.x and earlier).
For Tailwind v4 please see the docs on the Hyva Sources command

This feature, part of the @hyva-themes/hyva-modules package, simplifies CSS management for Hyvä themes in Magento 2.

It automatically merges CSS from Hyvä-compatible modules into your theme, eliminating manual imports.

While often used with Tailwind CSS, it's independent of your Tailwind workflow.

To override or completely remove the default CSS of a specific module, use the excludeDirs option within the postcssImportHyvaModules configuration in your web/tailwind/postcss.config.js file.

For example, to exclude the CSS from the magento2-hyva-checkout module:

const { postcssImportHyvaModules } = require("@hyva-themes/hyva-modules");

module.exports = {
  plugins: [
    postcssImportHyvaModules({
      excludeDirs: ["vendor/hyva-themes/magento2-hyva-checkout/src"],
    }),
    require("postcss-import"),
    require("tailwindcss/nesting"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

For more detailed information and advanced usage of the excludeDirs option, please refer to the documentation on Excluding Module Tailwind Source Files from Merging.