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.

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.

• css
• symfony
• tailwind-css
• tailwind-css-4

• 1 There have been major changes between Tailwind v3 and v4. A code base using v3 previously is not expected to work with v4 with no changes. Consider reviewing the upgrade guide to see the major changes. – Wongjn Commented Feb 1 at 16:06
• This question is similar to: How to upgrade TailwindCSS?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – rozsazoltan Commented Feb 1 at 17:29

1 Answer 1

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:

• SymfonyCasts/tailwind-bundle #81: TailwindCSS v4 support - GitHub
• SymfonyCasts/tailwind-bundle PR #86: Proposal to fix Tailwind CSS v4 support

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

• Using a Different Binary Version - Symfony TailwindBundle Docs

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";

• Upgrade guide - TalwindCSS v3 to v4
• Problem with "npx tailwindcss init -p" command - StackOverflow - related to v4 upgrade
• Unable to upgrade Tailwind CSS v3 to v4 - StackOverflow - related to v4 upgrade
• How to setting Tailwind CSS v4 global class? - StackOverflow - related to v4 upgrade
• Deprecated: preprocessors support - StackOverflow - related to v4 upgrade