Skip to content

Unable to see styling changes (Hyva/Tailwind) on local environment?

I am unable to see styling changes (changing tailwind.config.js nor changing the css files within my tailwind folder). I have created a child theme and moved over the hyva default theme files as instructed.

I am running npm run watch and my changes are triggering a build. However, when loading my local site, the change is not visible.

I am only able to see the change after running
bin/magento setup:static-content:deploy -f, which takes close to a minute to complete.

My tailwind purge configuration looks like:

    // this theme's phtml and layout XML files
    '../../**/*.phtml',
    '../../*/layout/*.xml',
    '../../*/page_layout/override/base/*.xml',
    // parent theme in Vendor (if this is a child-theme)
    '../../../../../../../vendor/hyva-themes/magento2-default-theme/**/*.phtml',
    '../../../../../../../vendor/hyva-themes/magento2-default-theme/*/layout/*.xml',
    '../../../../../../../vendor/hyva-themes/magento2-default-theme/*/page_layout/override/base/*.xml',
    // app/code phtml files (if need tailwind classes from app/code modules)
    '../../../../../../../app/code/**/*.phtml',

I am running cloud docker as described here within a WSL ubuntu environment