Overriding Module CSS

Hyvä themes automatically merge CSS from compatible modules into your theme, simplifying CSS management and eliminating the need for manual imports. This feature is handled by @hyva-themes/hyva-modules for Tailwind v3 and hyva-sources for Tailwind v4.

To override or completely remove a module's default CSS, you can exclude it from this automatic merging process. The exclusion method varies based on your Tailwind CSS version.

Tailwind v4

For Tailwind v4 projects, configure module exclusion in your theme's root hyva.config.json file. Use the tailwind.exclude array to specify modules to be excluded.

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

{
    "tailwind": {
        "exclude": [
            { "src": "vendor/hyva-themes/magento2-hyva-checkout/src" }
        ]
    }
}

The hyva-sources command uses this configuration. For more details, refer to the hyva-sources command documentation.

Tailwind v3 (Hyvä 1.3.x and earlier)

For Tailwind v3 projects, use the excludeDirs option within the postcssImportHyvaModules configuration in your web/tailwind/postcss.config.js file.

For example, to exclude 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 details on the excludeDirs option, refer to the documentation on Excluding Module Tailwind Source Files from Merging.