Module tailwind-source.css merging
Modules can add CSS declarations that will be used in addition to a theme tailwind-source.css
file.
This feature is provided by a npm module @hyva-themes/hyva-modules
(the same npm module that also provides module tailwind.config.js
merging).
This npm module is included with the Hyvä default theme since release 1.1.14, but it can also be added to themes based on older releases.
Module tailwind-source.css
merging for 1.1.13 and older themes
-
First, run the following command to install the npm module to the theme within the theme
web/tailwind
directory. -
Import the module in the themes
postcss.config.js
file. -
Add the
postcssImportHyvaModules
to themodule.exports
before thepostcss-import
plugin.
The npm module also contains functionality to merge tailwind.config.js configuration from modules.
Adding a module to the tailwind CSS source
1. Create the tailwind-source.css
file
For modules the tailwind-source.css
file is located at view/frontend/tailwind/tailwind-source.css
.
Any paths are specified relative to this file. For example, to include the modules components/widgets.css
file, use
2. Add the module to the app/etc/hyva-themes.json
file
A modules tailwind-source.css
file will not be included in the build process immediately.
First, the module needs to be added to the Magento app/etc/hyva-themes.json
file. This file contains a list of all installed modules that should be scanned for tailwind configuration or tailwind CSS.
The hyva-themes.json
file is generated by the command
After a compat module is installed on a Magento instance, this command should be run to add it to the tailwind build process. No manual configuration changes are required.
For more information on the hyva-themes.json
file can be found on the tailwind.config.js
merging documentation.