Tailwind CSS management in Hyva
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.config.js deposit
Merged tailwind.config.js module
Tailwind configuration for third-party modules can be found at
view/frontend/tailwind/tailwind.config.js.
All paths are specified relative to this file. For example, to include modules *.phtml.
File content:
Any type of file can be added to the content path: XML layout, *.html, *.jsx.
Merged tailwind-source.css module
Add CSS declarations that will be used in addition to a theme tailwind-source.css deposit.
Thanks to this, one can add a CSS file as a component, just like the Hyva theme.
Added a module to the tailwind CSS source.
1. Create the tailwind-source.css deposit
In modules tailwind-source.css the file is located at view/frontend/tailwind/tailwind-source.css
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 tailwind-source.css.
URL mentioned in tailwind-source.css for components
@import url(components/widget.css);
3. Generate CSS
First, you will need to install all required node packages.
Generate CSS for production
cd seller/hyva-themes/magento2-default-theme/web/tailwind
Generate CSS during development
cd seller/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 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 web/tailwind
(seller/hyva-themes/magento2-default-theme/web/tailwind)
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!
