Tailwind CSS Management in Hyva
In this blog we will discuss about css management in Hyva theme. We will use css framework tailwind with hyva themes and how to integrate tailwind css with Hyva Theme Extensions
Adding a module to the tailwind purge config
1. Create the tailwind.config.js file
Module tailwind.config.js merging
Tailwind configuration for third party modules is located at
view/frontend/tailwind/tailwind.config.js.
Any paths are specified relative to this file. For example, to include the modules *.phtml.
Content of the file:
Any type of file can be added to the content path: layout XML, *.html, *.jsx.
Module tailwind-source.css merging
Add CSS declarations that will be used in addition to a theme tailwind-source.css file.
By this one can add css file as the component just like hyva theme.
Adding a module to the tailwind CSS source.
1. Create the tailwind-source.css file
In modules tailwind-source.css file is located at view/frontend/tailwind/tailwind-source.css
Create directory name components inside view/frontend/tailwind/ and create css file like hyva in path vendor/hyva-themes/magento2-default-theme/web/tailwind for default theme. One can create the component for any third party module and specify its name in tailwind-source.css.
Url mentioned in tailwind-source.css for components
@import url(components/widget.css);
First, you will need to install all required node packages.
Generating CSS for production
cd vendor/hyva-themes/magento2-default-theme/web/tailwind
Generating CSS during development
cd vendor/hyva-themes/magento2-default-theme/web/tailwind
This will start running the tailwind compiler continuously and any css classes added to templates in the purge configuration will be added to the 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 npm module to the theme within the theme web/tailwind (vendor/hyva-themes/magento2-default-theme/web/tailwind) directory.
npm install @hyva-themes/hyva-modules
This command will create the node_modules directory at theme within the theme web/tailwind
(vendor/hyva-themes/magento2-default-theme/web/tailwind)
Now run npm run watch or
npx tailwindcss –postcss -i tailwind-source.css -o ../css/styles.css –watch –verbose
For source component to create the updated and unified css file styles.css
For more information read:
https://docs.hyva.io/hyva-themes/working-with-tailwindcss/index.html
https://webkul.com/blog/working-with-tailwindcss-in-hyva-theme/
That’s it !!
Thanks & Happy Coding!