tailwind-bundle icon indicating copy to clipboard operation
tailwind-bundle copied to clipboard

I must use asset-map:compile to see modification

Open LewisSama opened this issue 1 year ago • 15 comments

Hi !

I'm using the template from dunglas/symfony-docker. I followed the instruction to build/launch my container and installed the bare minimum according to documentation:

Twig:

  • symfony/twig-bundle

Asset-mapper:

  • symfony/asset-mapper
  • symfony/asset
  • symfony/twig-pack

Tailwindbundle:

  • symfonycasts/tailwind-bundle

After installing those according to documentation, i created a simple controller to use my twig file but i encounter an error: An exception has been thrown during the rendering of a template ("Built Tailwind CSS file does not exist: run "php bin/console tailwind:build" to generate it").

Even after running php bin/console tailwind:build, the error persists. The only way to stop this error is to compile using asset-map:compile.

Afterward, every change i've made and built are not applied even when i use the --poll and i must rerun asset-map:compile to see any modification.

As it is very inconvenient to use asset-map:compile at every change, i wanted to know if there is anyway to make my tailwind:build --watch works.

Also, it's my first issue on GitHub so if there is any modification to make or precision, please tell me.

LewisSama avatar Nov 22 '24 11:11 LewisSama

Could be related: https://github.com/SymfonyCasts/tailwind-bundle/commit/81c9e6ff2bb1a95e67fc6af04ca87fccdcf55aa4 - make sure (for now) that Tailwind 3 is being downloaded

weaverryan avatar Feb 04 '25 18:02 weaverryan

I'm facing similar problem, when I add or edit classes in my 'main/homepage.html.twig' template, tailwind:build -w doesn't show any rebuilding changes & the browser doesn't reflect those classes' changes as well. I always have to make some changes to another template classes, so tailwind:build -w and browser can reflect those changes.

Dameen-Rainer avatar Feb 09 '25 13:02 Dameen-Rainer

I'm facing the same issue, even working with Tailwind v3.4.17. The only way to make the new changes work is running asset-map:compile

thinway avatar Feb 11 '25 18:02 thinway

Is everyone experiencing this issue using docker?

kbond avatar Feb 11 '25 21:02 kbond

yes, I'm using docker

thinway avatar Feb 11 '25 22:02 thinway

I'm facing the exact same issue, also using Tailwind v3.4.17, did one of you found a solution except using asset-map:compile ?

MatthieuLeVerger avatar Mar 06 '25 19:03 MatthieuLeVerger

I'm using the https://github.com/dunglas/symfony-docker boilerplate, and experiencing this issue.

Sh3nl0ng avatar Mar 08 '25 19:03 Sh3nl0ng

Ok, pretty sure this issue is docker-specific. I don't use this in docker myself so I'll need some help here.

kbond avatar Mar 08 '25 19:03 kbond

For my case, this appears to be an issue with the /var folder not being mapped into the container by default.

By adding ./var:/app/var to my volumes definition in the compose.override.yaml I was able to resolve this issue.

# compose.override.yaml

# Development environment override
services:
  php:
    build:
      context: .
      target: frankenphp_dev
    volumes:
      - ./:/app
      - ./frankenphp/Caddyfile:/etc/caddy/Caddyfile:ro
      - ./frankenphp/conf.d/20-app.dev.ini:/usr/local/etc/php/app.conf.d/20-app.dev.ini:ro
      # If you develop on Mac or Windows you can remove the vendor/ directory
      #  from the bind-mount for better performance by enabling the next line:
      # - /app/vendor
      - ./var:/app/var
    environment:
      MERCURE_EXTRA_DIRECTIVES: demo
      # See https://xdebug.org/docs/all_settings#mode
      XDEBUG_MODE: "${XDEBUG_MODE:-off}"
    extra_hosts:
      # Ensure that host.docker.internal is correctly defined on Linux
      - host.docker.internal:host-gateway
    tty: true

###> symfony/mercure-bundle ###
###< symfony/mercure-bundle ###

###> doctrine/doctrine-bundle ###
  database:
    ports:
      - "3306"
###< doctrine/doctrine-bundle ###

Shoutout to this comment I came across on Symfonycasts.

Caveat - The /var folder is purposefully included in the .dockerignore folder to improve performance of your containers. If you notice performance issues related to this change you can target the /var/tailwind instead of the entire /var folder.

Sh3nl0ng avatar Mar 09 '25 01:03 Sh3nl0ng

I'm not using Docker but I still have the same issue. I need to compile everytime I want to see changes on my web page.

SaraTerrier avatar Mar 12 '25 20:03 SaraTerrier

Hi everyone!

We can't replicate, but I can give more info, then I'm hoping someone who is having the issue can debug:

It’s confusing because we have to compile commands (tailwind and asset mapper), both in watch mode.

Let’s assume (which I think is the case) that tailwind’s watch mode is working. In that case, the problem is asset mapper’s watch not seeing the changes to the built tailwind file, which lives in the var/ directory.

I did see someone comment on mapping var/ in docker for this to work. I'd be curious if that fixes the issue for other docker users.

For all situations: what happens if you touch or manually modify the built tailwind file in var/? Does asset-mapper:build's watch see that change? Do you see the changes in your browser without needing to restart the asset-mapper:build command?

Finally if var/ for some reason is causing trouble, we could try storing the built tailwind file in a /tmp/ OS directory. I can't remember if there is a requirement that the built file live IN the project, but it may be worth a shot

weaverryan avatar Mar 13 '25 14:03 weaverryan

I had the exact same problem. My solution was to delete the public/assets folder. Afterwards the folder is no longer created and my modifications get recognized directly.

I still get the issue when I run asset-map:compile because then the public/assets folder gets recreated. I assume symfony first looks in there for the css file and tailwind doesn't replace the css file in the public/assets directory.

I hope it helps someone. I am also not using docker for development.

joelbeckmann avatar Mar 14 '25 16:03 joelbeckmann

I had the exact same problem. My solution was to delete the public/assets folder. Afterwards the folder is no longer created and my modifications get recognized directly.

I still get the issue when I run asset-map:compile because then the public/assets folder gets recreated. I assume symfony first looks in there for the css file and tailwind doesn't replace the css file in the public/assets directory.

I hope it helps someone. I am also not using docker for development.

Thanks that was the solution ! Deleting the public/assets folder and only using symfony server:start and php bin/console tailwind:build --watch works afterwards.

SaraTerrier avatar Mar 15 '25 16:03 SaraTerrier

Ok, looks like this is an asset-mapper thing rather than a tailwind-bundle thing.

Basically, public/assets shouldn't exist in dev to allow for asset mapper's request subscriber to work correctly.

kbond avatar Mar 16 '25 15:03 kbond

I had a similar issue with docker from Dunglas. After I upgraded tailwind to v4 it works like a charm now. The issue was with Tailwind v3 that was not detecting files getting changed with the following command

php bin/console tailwind:build -w

In case someone wants to try too.

latysh avatar Aug 06 '25 11:08 latysh