Search code examples
csssymfonytailwind-csstailwind-css-4

TailwindCSS v4 Build Causes No Styles to Display in Symfony (using Importmap)

I'm encountering an issue with TailwindCSS in my Symfony project that used to work perfectly until I re-ran the build today. Suddenly, the build process downloaded TailwindCSS v4, and now none of my styles are displaying on the site.

My Setup

  • Symfony Version: 7.1
  • Tailwind Bundle: I'm using symfonycasts/tailwind-bundle (previously working)
  • Build Process: I run the build using the following command:
php bin/console tailwind:build --watch
  • Importmap: I'm using Symfony with Importmap. My assets/app.js includes:
import './styles/app.css';

and my assets/styles/app.css contains:

@tailwind base;
@tailwind components;
@tailwind utilities;
    
@font-face {
  font-family: 'Memoirs';
  src: url('/fonts/Mouse_Memoirs/MouseMemoirs-Regular.ttf') format('truetype');
}

I can confirm that my CSS is being correctly interpreted (e.g., classes are recognized in the browser dev tools), so the issue appears to stem solely from Tailwind.

What Happened

Until yesterday, everything was working as expected. Today, when I re-launched the build command, the process downloaded TailwindCSS version 4 (v4.0.3 for Windows x64). The output from the build command is similar to:

! [NOTE] Executing Tailwind (pass -v to see more details).

Command: C:\Path\to\project/var/tailwind/v4.0.3/tailwindcss-windows-x64.exe -c C:\Path\to\project/tailwind.config.js -i C:\Path\to\project/assets/styles/app.css -o C:\Path\to\project/var/tailwind/tailwind.built.css --watch

≈ tailwindcss v4.0.3

Done in 106ms

However, even though the build completes successfully, no Tailwind styles are applied on my site.

What I've Tried

  • Verifying CSS Output: The build generates a CSS file at var/tailwind/tailwind.built.css, but I'm not using this file directly because I rely on Importmap to load my assets.
  • Checking Importmap Setup: My app.js correctly imports app.css, and the CSS file contains the Tailwind directives.
  • Reverting Configuration: I removed any custom configuration files since everything was working before. My setup hasn't changed except that now Tailwind v4 is being used.
  • Downgrading: I even tried reverting to a previous version of the bundle, but the issue persists.

Question

Has anyone encountered a similar issue where updating to TailwindCSS v4 causes no styles to appear in a Symfony project using Importmap? Is there a known compatibility issue or a change in Tailwind v4 that might explain this behavior? Any help or pointers on how to troubleshoot this would be greatly appreciated.

Solution

  • SymfonyCasts: Tailwind Bundle

    Since you mentioned that you are using this package, I thought it was important to check whether they have implemented the necessary changes for the TailwindCSS v4 release. Here's what I found:

    You can temporarily use TailwindCSS v3, but TailwindBundle will install the latest version by default.

    This sets the default version to 3.4.17 (the latest on the 3.x branch). This is temporary until 4.0 is supported.

    Source: SymfonyCasts/tailwind-bundle PR #83: fix: default to latest Tailwind CSS v3.x

    Regardless of the package, it's a good idea to familiarize yourself with the changes as well.

    TailwindCSS v4

    Removed @tailwind directives

    In v4 you import Tailwind using a regular CSS @import statement, not using the @tailwind directives you used in v3:

    Not supported from v4

    @tailwind base;
@tailwind components;
@tailwind utilities;

    Supported from v4

    @import "tailwindcss";