Override Module CSS in Your Theme

You cannot override a module's CSS by simply creating a file with the same name in your theme. Instead, use the excludeDirs directive in your theme’s web/tailwind/postcss.config.js file.

Follow these steps to properly override module CSS in your theme:

Steps to Override Module CSS

1. Exclude Module CSS:
   Add the module directory to the excludeDirs directive in your theme’s web/tailwind/postcss.config.js. This prevents the module's original CSS from being included in the build process.
   For details on using excludeDirs, refer to Module tailwind-source.css merging.
2. Copy CSS to Theme:
   Copy the module's CSS files you want to override to your theme’s web/tailwind/theme directory. This is where you will modify them.
3. Import New CSS:
   In your theme’s web/tailwind/tailwind-source.css file, import the copied CSS files. This ensures your theme’s version of the CSS is loaded instead of the module’s default.
4. Customize CSS:
   Edit and customize the CSS files in your theme's directory to match your design or functionality requirements.