Migration tool doesn't recognize .scss files

[ajuvonen]

What version of Tailwind CSS are you using?

3.4.17

What build tool (or framework if it abstracts the build tool) are you using?

Vite 6, Vue 3, postCSS

What version of Node.js are you using?

22

What browser are you using?

N/A

What operating system are you using?

Windows 11

Reproduction URL

No repro

Describe your issue

My project has a .scss file with Tailwindcss declaration, which is in turn imported in the main .ts file. Trying to run migration with npx @tailwindcss/upgrade@next returns the following error:

│ Searching for CSS files in the current directory and its subdirectories…

│ ↳ Cannot find any CSS files that reference Tailwind CSS.
│ Before your project can be upgraded you need to create a CSS file that imports Tailwind CSS or uses @tailwind.

The error disappears if I rename my .scss stylesheet to .css.

[yutao815]

same problem.

[ghidoz]

Same here, in my Angular project, with scss.

[MarcelKlammer]

https://tailwindcss.com/docs/compatibility

Don't use scss anymore, use plain css files.

[e-oz]

It’s easier to say for a new project, but new projects don’t need this tool :)

[ghidoz]

Yeah, what if I'm using a custom scss theme in Angular Material?

[sheikalthaf]

Hey Angulars,

If your scss file contains // comments then it will break the tailwind v4 instead use /* comment */.

@adamwathan FYI.

[Kinselan]

I'm having the same issue -- .scss file is blocking the upgrade.

[AntonioVentilii]

Any news here? Same problem

[Hidduh]

Same issue here, I can temporarily change it to a regular .css file but this would require quite a few adjustments in these files.

[RobinMalfait]

Hey!

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 (more info about compatibility: https://tailwindcss.com/docs/compatibility#sass-less-and-stylus)

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.

[e-oz]

Every Angular project with Angular Material uses mixins, so it means such projects simply can't upgrade to v4.

[bugproof]

Every Angular project with Angular Material uses mixins, so it means such projects simply can't upgrade to v4.

I think you can still use it. Just use regular .css for the rest of your project and other overrides. The main issue right now is with @reference I think as it requires massive rewrites at least in angular where you don't have direct access to vite config and you can't simply add an alias (don't ask me why - angular sucks). So really it's up to angular team to integrate it more gracefully or tailwind team to make using @reference less cumbersome or add implicit references via some "main css file" config.

The current situation is not ideal and while I will use v4 for other non-angular projects or new ones for angular I'll stick with v3 until there's some more backward-compatible @apply in CSS modules solution

[jits]

I've written up how I'm migrating Angular projects (with Sass) to Tailwind v4: https://jits.dev/blog/migrating-angular-tailwind-v4/

[e-oz]

@jits, it's for migrating the config only, and only for cases when your config can be migrated. 0 SCSS/CSS files are updated, and most of the "juice" is in SCSS files and templates, not in config.

[jits]

@e-oz — I don't follow your point; have you read my post? In my case, CSS and templates are being updated (if you follow the "manual" approach I recommend).

[e-oz]

I did read your article and the only updated CSS file is what you created in root.

[jits]

@e-oz — yes, that's why in my post I say:

We’ll create a temporary CSS file in the root that contains only the Tailwind specific bits from our src/styles.scss file. This is only temporary and for the upgrade tool to do its magic. We’ll inspect the changes made and apply them to our main styles file and delete this temporary one.

… and I then go on to explain the steps you need to take to manually apply the changes back to your main styles file:

Inspect your tailwind.tmp.css file and compare it to your src/styles.scss file.

You can use git diff to see the changes made by the upgrade tool:

git diff tailwind.tmp.css

You’ll need to apply these changes to your main src/styles.scss file manually to complete this migration.

As far as I know, there's no way to get the Tailwind v4 upgrade tool to work on SCSS files directly (which is the point of this GitHub repo issue, and confirmed by RobinMalfait). So I'm not certain what you're expecting, differently?

[e-oz]

and I then go on to explain the steps you need to take to manually apply the changes back to your main styles file:

tailwind.tmp.css is an empty file, it’s just a reference to prevent the upgrade tool from failing. The only changes there will be about the border color workaround, that’s it. None of the existing SCSS/CSS files will be updated. If you use @apply with class names that are modified/removed in v4, they won’t be updated. If you use theme() - you’ll need to change that to CSS variables manually. There’s a lot of work in SCSS files, and your article creates a false expectation that this can be done using the migration tool.

[jits]

@e-oz — tailwind.tmp.css is not meant to be empty. I specify what you need to do in the steps in my post.

At this point I'll bow out of this conversation, as I can only assume you haven't read my post properly.

There’s a lot of work in SCSS files, and your article creates a false expectation that this can be done using the migration tool.

I don't make this assertion anywhere. YMMV.

[AntonioVentilii]

Is there really no plan of making the migration tool work with SCSS files? It would be useful to know it for certain, since it requires quite a lot of work to do it manually on a big project.

AND is it official that tailwind should not be used with SCSS files?

[e-oz]

@AntonioVentilii Tailwind (not the migration tool) works fine with SCSS files if they don’t have comments like // this, and only /** like this **/ are used. Also, import paths should be adjusted slightly (no skipped underscores, and sometimes ./ is needed to make the import work).
I would still recommend using CSS for new projects with Tailwind, though.

[AntonioVentilii]

@e-oz what I meant is that I would like to upgrade tailwindcss in my project, which has a lot of SASS files and uses a lot of tailwind classes. However, the upgrade tool does not work in my case because it says that there is no reference to tailwindcss in any file. That is because it does not recognise the scss files, and so it does not apply the migration, nowhere, not even in the classes used in other types of files.

[Celtian]

From my POW I see this as a failure ... I am blocked to upgrage to new version nad I will hope that v5 will be better ...

[mvosz]

I managed to get Tailwind V4 running in Angular V19 with custom SCSS through Angular Material Components. However, while SCSS changes are detected when saved, no actual changes are recognized.

No output file changes.
Application bundle generation complete.

[AntonioVentilii]

I have to agree with @Celtian ... you say that tailwindcss v4 supports SASS, but then the migration is done manually, with great risk of doing it wrong. This means that either we invest time in migrating a project, or we are stuck to v3 until a better solution appears.

[adlion]

+1 for angular
Unable to upgrade on our projects

SCSS is a standard for a lot of projects.
This means either full commitment on using tailwind or not at all.
It opens a lot of troubles for projects which might have a combination of tailwind with some in house SCSS
(I have read that it supports SASS on CSS files, but this does not make sense renaming all files from SCSS to CSS and writing SCSS with the hope that tailwind will do its job and follow the SCSS standards )

+1 angular and scss
They are suggesting renaming all the scss files to css which is not acceptable for many of projects

My setup for angular NX and tailwind v4 and vscode:

1. in root create a .postcssrc.json (as described on angular tailwind installation) with content:

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

2. for each project keep the scss files but on the root of the project create a styles.css
3. In project.json of each project add under styles:

...
"styles": [
          "REPLACE_WITH_PROJECT_DIR/styles.scss",
          "REPLACE_WITH_PROJECT_DIR/styles.css"
        ]
...

tailwind and vscode tailwind extension (v0.14.6) seems to work so far

Best solution is to create a shared styles library and include it in every project.json

[mattiLeBlanc]

I just ran into this issue, whilst not being aware this is such a breaking change.
I am using SCSS because of angular Material library and I use tailwind MASSIVELY for its nice flex and margin/padding utilities.
After recently migrating away from the discontinued angular-flex-layout library towards tailwind I got a near heartfailure seeing all of my tailwind work now no longer works in the upgraded Angular 19 project.
Simple removing SCSS is not an option.
I minimize using SCSS, I try to use tailwind everywhere. But I need it for my Material components.

Maybe the Tailwind team can reach out to the Angular team to make a fine integration between the two?

[jits]

I've written up how I'm migrating Angular projects (with Sass) to Tailwind v4: https://jits.dev/blog/migrating-angular-tailwind-v4/

For anyone interested, I've written up a follow up post: Make Tailwind CSS v4 play nice with Angular Material.