Software Development

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


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

npm run build-prod

Generate CSS during development

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

npm runtime watch

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


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!

Source link

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button