The Unexpected Issue

Recently, I was setting up Tailwind CSS v4 in a Vite React project, expecting a smooth installation process as usual. However, I ran into a frustrating issue that left me scratching my head for a while. I had always used SCSS in my projects, and naturally, I attempted to import Tailwind inside my .scss file like this:

1@import "tailwindcss";

To my surprise, this didn't work at all. Vite threw an error, and no Tailwind styles were being applied. I double-checked my installation and configuration, but everything seemed fine. So what was going wrong?

Debugging the Problem

After some research and trial and error, I found out that Tailwind CSS does not support being imported directly into an SCSS file. This is because Tailwind itself relies on PostCSS for processing, and SCSS doesn’t naturally work with PostCSS plugins like Tailwind.

I initially thought this might be a bug in Vite or Tailwind v4, but it turns out this has always been the case. Previously, I had unknowingly always followed the correct approach, but this time, I overlooked the fundamental requirement of how Tailwind should be set up.

The Fix

To get Tailwind working properly, I had to create a separate CSS file (tailwind.css) and import Tailwind there:

@import "tailwindcss";

Then, in my main.jsx or App.jsx, I imported the CSS file:

1import "./tailwind.css";

This immediately fixed the issue, and Tailwind was working as expected!

Lesson Learned

This experience was a good reminder that not everything can be seamlessly mixed together, especially when dealing with different preprocessing tools like SCSS and PostCSS. If you're using SCSS in your Vite React app, keep in mind:

• Tailwind must be imported in a .css file, not an .scss file.
• SCSS and Tailwind can still be used together, but Tailwind’s imports must remain separate from SCSS imports.
• Always check official documentation and community discussions when encountering unexpected issues.

If you're setting up Tailwind v4 in a Vite React project, hopefully, this saves you some time and frustration!

Have you ever run into similar issues with Tailwind or Vite?