I have created Webpack 5 demo for plain HTML, CSS and JS using TailwindCSS v4.

• GitHub: sanketpbhamre/tailwind-4-webpack-5

Webpack CSS configuration

module: {
  rules: [
    {
      test: /\.(s[ac]|c)ss$/i,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: "css-loader",
          options: {
            importLoaders: 2,
          },
        },
        "postcss-loader",
        "sass-loader",
      ],
    },
  ],
},

PostCSS configuration

module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
    "postcss-preset-env": {
      // stage: 3,
      // features: {
      //   "nesting-rules": true,
      //   "custom-media-queries": true,
      //   "media-query-ranges": true,
      // },
    },
  },
};

style.css

@import "tailwindcss";

In this project, when I execute npm run build, the emitted .css file have a lot of unwanted code. I didn't get where I am doing wrong. Also emitted .css is not minified.

I am following Get Started TailwindCSS with PostCSS manual.

I don't want to go with Vite. I am definitely looking for the solution in Webpack.

EDIT

As guided by @rozsazoltan, I have removed sass-loader. I still facing same issue.

Webpack CSS configuration

module: {
  rules: [
    {
      test: /\.css$/i,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: "css-loader",
          options: {
            importLoaders: 2,
          },
        },
        "postcss-loader",
      ],
    },
  ],
},

PostCSS configuration

module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

I have created Webpack 5 demo for plain HTML, CSS and JS using TailwindCSS v4.

• GitHub: sanketpbhamre/tailwind-4-webpack-5

Webpack CSS configuration

module: {
  rules: [
    {
      test: /\.(s[ac]|c)ss$/i,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: "css-loader",
          options: {
            importLoaders: 2,
          },
        },
        "postcss-loader",
        "sass-loader",
      ],
    },
  ],
},

PostCSS configuration

module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
    "postcss-preset-env": {
      // stage: 3,
      // features: {
      //   "nesting-rules": true,
      //   "custom-media-queries": true,
      //   "media-query-ranges": true,
      // },
    },
  },
};

style.css

@import "tailwindcss";

In this project, when I execute npm run build, the emitted .css file have a lot of unwanted code. I didn't get where I am doing wrong. Also emitted .css is not minified.

I am following Get Started TailwindCSS with PostCSS manual.

I don't want to go with Vite. I am definitely looking for the solution in Webpack.

EDIT

As guided by @rozsazoltan, I have removed sass-loader. I still facing same issue.

Webpack CSS configuration

module: {
  rules: [
    {
      test: /\.css$/i,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: "css-loader",
          options: {
            importLoaders: 2,
          },
        },
        "postcss-loader",
      ],
    },
  ],
},

PostCSS configuration

module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

• webpack
• sass
• tailwind-css
• webpack-5
• tailwind-css-4

• Don't change the content of the question. This is a new question that follows from the solution. Feel free to write a new question where you include the EDIT section and reference this question. It will be important for others who also use Webpack + SASS + TailwindCSS to see my answer. – rozsazoltan Commented 6 hours ago

1 Answer 1

The solution lies in your Webpack configuration.

You are associating PostCSS (and thus TailwindCSS by "postcss-loader") and the SASS preprocessor (by "sass-loader") with your CSS files. However, starting from v4, TailwindCSS has removed support for preprocessors, reasoning that it can handle their functionality itself, providing faster and better performance.

So, in the Webpack configuration, don't use the "sass-loader" anymore.

See:

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.

• Compatibility - TailwindCSS v4 Docs

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.

• tailwindlabs/tailwindcss #15716 by RobinMalfait:
  Migration tool doesn't recognize .scss files - GitHub

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.

Automatic Source Detection

By the way, a useful note: starting from v4, Tailwind has auto source detection, and it's good to have a .gitignore folder to disable the analysis of the node_modules folder, see here:

• Automatic Source Detection from TailwindCSS v4