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);

3. Generating CSS

First, you will need to install all required node packages.

Generating CSS for production

cd vendor/hyva-themes/magento2-default-theme/web/tailwind

npm run build-prod

Generating CSS during development

cd vendor/hyva-themes/magento2-default-theme/web/tailwind

npm run watch

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!