In this blog, we will discuss CSS management in Hyva theme. We will use Tailwind CSS framework with Hyva themes and how to integrate Tailwind CSS with Hyva theme extensions.
Added a module to the tailwind purge configuration
1. Create the
Tailwind configuration for third-party modules can be found at
All paths are specified relative to this file. For example, to include modules
Any type of file can be added to the content path: XML layout,
Merged tailwind-source.css module
Add CSS declarations that will be used in addition to a theme
Thanks to this, one can add a CSS file as a component, just like the Hyva theme.
1. Create the
tailwind-source.css the file is located at
Create a directory name Components inside
view/frontend/tailwind/ and create a CSS file like Hyva in the path provider/hyva-themes/magento2-default-theme/web/tailwind for the default theme. One can create the component for any third-party module and specify its name in
URL mentioned in tailwind-source.css for components
3. Generate CSS
First, you will need to install all required node packages.
Generate CSS for production
Generate CSS during development
This will start running the Tailwind compiler continuously and any CSS classes added to templates in the purge config will be added to the file.
styles.css file immediately.
In order to update the CSS via
tailwind.config.js and postcss.config.js
First, run the following command to install the themed npm module in the theme
web/tailwind (seller/hyva-themes/magento2-default-theme/web/tailwind) directory.
npm install @hyva-themes/hyva-modules
This command will create the node_modules theme directory in theme
Now run npm runtime watch Or
npx tailwindcss –postcss -i tailwind-source.css -o ../css/styles.css –watch –verbose
For the source component to create the updated and unified CSS file styles.css
For more information, read:
That’s it !!
Thanks and happy coding!