How to Override a CSS File from a Module
It is not possible to override a CSS file from a module simply by creating a file with the same name in your theme directory.
Instead, you need to use the excludeDirs
directive in your theme’s web/tailwind/postcss.config.js
file.
Follow the steps below to properly override a module’s CSS in your theme.
Steps to Override Module CSS in a Theme
- Exclude the Module’s CSS Files:
Add the module directory to theexcludeDirs
directive in your theme’sweb/tailwind/postcss.config.js
file. This prevents the module's original CSS from being included in the build process.
For more details on how to use theexcludeDirs
directive, refer to the guide on Module tailwind-source.css merging. - Copy CSS Files to Your Theme:
Locate the CSS files you want to override in the module and copy them to your theme’sweb/tailwind/theme
directory. This is where you’ll modify the CSS to suit your needs. - Import the New CSS Files:
In your theme’sweb/tailwind/tailwind-source.css
file, import the copied CSS files. This ensures that your theme’s version of the CSS is loaded instead of the module’s default version. - Customize the CSS:
Once the module’s CSS files are in your theme’s directory, you can edit and customize them as needed to match your design or functionality requirements.
For more information on excluding module Tailwind source files from merging, check out the detailed documentation on Module tailwind-source.css merging.