CODEWITHSUNDEEP
csssymfonytailwind-csstailwind-css-4
GeppettoG
GeppettoG

Reputation: 63

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

php bin/console tailwind:build --watch

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

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.

Upvotes: 1

Views: 279

Answers (1)

rozsazoltan
rozsazoltan

Reputation: 8315

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

Upvotes: 0

Related Questions