CODEWITHSUNDEEP
cssangularsasstailwind-csstailwind-css-4
Nathan30
Nathan30

Reputation: 899

How to upgrade TailwindCSS?

I'm currently using Tailwind v3 in my Angular project (https://github.com/edissyum/opencapture/tree/dev_nch).

Today I tried to upgrade to Tailwind v4, but without success.

I didn't use PostCSS, I just have Tailwind in my package.json, my tailwind.config.js and the @tailwind base import in my main scss file.

If I upgrade the package to 4.0.0, I have the following error:

Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

I try to install @tailwind/postcss and create a PostCSS config file like this:

export default {
  plugins: {
    "@tailwindcss/postcss": {}
  }
}

Upvotes: 13

Views: 10783

Answers (8)

rozsazoltan
rozsazoltan

Reputation: 9073

Although it's not explicitly stated in the question, after reading the comments, I thought it would be better to highlight an important change here as well.

Deprecated: preprocessors support

Sass, Less, and Stylus

Tailwind CSS v4.0 is a full-featured CSS build tool designed for a specific workflow, and is not designed to be used with CSS preprocessors like Sass, Less, or Stylus.

Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus.

Since Tailwind is designed for modern browsers, you actually don't need a preprocessor for things like nesting or variables, and Tailwind itself will do things like bundle your imports and add vendor prefixes.

Sorry for the inconvenience here, however right now we don't support migrating .scss or .less files. Doing so would require us to be able to understand the scss/sass and less syntax to make changes. But even if we do that, Tailwind CSS v4 isn't really compatible with these files anyway.

I would recommend to see if you can rename the file(s) to .css and try again. You might notice that sometimes people use scss for features such as nested css, which should just work already in Tailwind CSS v4 (and modern browsers). So there is a good chance that you might not need .scss files at all.

Again, sorry about the inconvenience here, but if you can migrate to normal .css files, then upgrading using the upgrade tool should just work.

Simply put, TailwindCSS v4 removes the need for Sass and other preprocessors. The TailwindCSS v4 ecosystem can independently provide the functionality that these preprocessors offered.

You can read about that in our compatibility guide but the short answer is that we do not support SCSS files with the Vite plugin. If you really need it for some reason, you can try to build your own SCSS implementation with the PostCSS plugin and by controlling the execution order but both SCSS and Tailwind CSS are pre-processors that extend CSS and cause a conflict in some areas, so that's not something that we can support unfortunately.

Upvotes: 9

Adrian
Adrian

Reputation: 356

For an angular project I recommend to migrate all scss to css. I did that and I executed the migration tool and the tool did the migration of my "old" tailwind.config.cjs to the main styles.css in my angular app. Then I installed the packages you need to install. Finally, the app is running fine without any issue. Later I think I can improve the styles.css because all of my added colors are in that file, but for now the app is running.

Note: I was using scss files because in that repo I do some explorations (I know that If you decide to use Tailwind you don't even need a css file, you only need to apply Tailwindcss classes)

Upvotes: 1

Ganesh
Ganesh

Reputation: 3484

I'm using Angular 19.x.x, Angular Material 19.x.x & Parts of Tailwind CSS v4.

Docs :

  1. Tailwind + Angular
  2. Upgrade Guide

Run to upgrade

npx @tailwindcss/upgrade@next

Run to install

npm install tailwindcss @tailwindcss/postcss postcss --force

Add .postcssrc.json

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

I added themes/_tailwind.css

@import "tailwindcss/theme";
@import "tailwindcss/utilities";

And updated my styles.scss to include

@use "themes/tailwind";

This also helped me fix auto-complete issue for VS Code tailwindcss/intellisense extension.

Upvotes: 3

Khasan Meliev
Khasan Meliev

Reputation: 1

I had the same issue but i solved it by removing tailwindcss from plugins in postcss.config.js

Upvotes: 0

rozsazoltan
rozsazoltan

Reputation: 9073

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: 8

Caio Rolla
Caio Rolla

Reputation: 21

The installation guide only works for projects without a custom tailwind.config.cjs and, most importantly, without any "@apply" directive.

I only manage to make i work be referencing the config file on each component style that makes use of apply and/or the theme:

@config "../../tailwind.config.cjs";

Did anyone had any luck with this?

Upvotes: 2

Pierre-D Savard
Pierre-D Savard

Reputation: 551

Finally, after following the Tailwind doc: https://tailwindcss.com/docs/installation/framework-guides/angular

Everything seems to work. Need to manually convert my config to the new way with @theme ....

Be sure to create the .postcssrc.json with the . at the beginning. The first time, I forgot it and got a lot of errors when doing ngserve.

Upvotes: 2

Madamin
Madamin

Reputation: 63

Before upgrading your tailwind version in package.json run command npx @tailwindcss/upgrade@next. It will migrate everything for you. This worked for me.

Upvotes: 6

Related Questions