Overriding CSS from Modules

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.