Skip to content

TailwindCSS v4 build succeeds but changes/styles are not applied with importmap #116

@Elemtro

Description

@Elemtro

Problem

When using importmap and TailwindCSS v4.0 with symfony/tailwind-bundle, the build command (tailwind:build or tailwind:build --watch) completes, but style changes are not applied in the browser. Classes are generated only in part (e.g., positioning classes) while others (like colors/components) are missing or not updated.

Related Discussion

Closed and ongoing issues suggest this may be caused by:

  • Tailwind v4 breaking changes affecting config and scanning (see Tailwind upgrade guide)
  • Tailwind v4 no longer auto-detects config files the same way as v3
  • Users needing to update app.css to use @import "tailwindcss"; instead of legacy directives (@tailwind base; etc.)
  • Some users report success by locking the CLI to v3.x in config/packages/symfonycasts_tailwind.yaml, while others have Tailwind v4 working with minor changes in app.css

Steps to Reproduce

  1. Set up symfony/tailwind-bundle with importmap and TailwindCSS v4.0
  2. Run tailwind:build or tailwind:build --watch
  3. Observe that only some styles are output; others do not appear or update when editing templates

Screenshot

Image

What I Tried

  • Changed config and reverted bundle/cli version to v3: problem still persists
  • Used Tailwind v4 with only config changes as suggested in community: partial success, not all styles generated
  • Cleared old Tailwind caches in ./var/tailwind/*
  • Updated app.css with new Tailwind v4 import and plugin directives

References

See discussions and experimental fixes in:

Expected Behavior

Styles and changes should be reflected after build just as with TailwindCSS v3.x, with importmap setup.

Actual Behavior

Partial or outdated styles; changes in templates not picked up by Tailwind v4 with the bundle. Build looks successful but results are not visible on page.

Environment

  • Symfony 7.3 + importmap
  • TailwindCSS v4.0.x
  • symfony/tailwind-bundle latest
  • Docker

Additional context

Tailwind's documentation for Symfony suggests using Webpack Encore, and I can confirm that this works perfectly. However, I want to use importmap as it is a best practice for modern Symfony applications, but it is not working. (see Tailwind install symfony)

Suggestions/Questions

  • Is there an updated, working configuration for Tailwind v4 + importmap?
  • Are any changes needed to the bundle to support the breaking changes, scan, or directives in Tailwind v4?
  • Should the docs be updated to guide users for v4 compatibility?

If anyone has a working setup with importmap + Tailwind v4, please share the config details.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions