Upgraded taiwind V3 to V4 - with webpack but tailwind css file not genarating

[irfankhan501]

• ugraded from tailwind V3 to V4 by running: npx @tailwindcss/upgrade
• added webpack.config.js and postcss.comfig.js file and install all it's dependencies
• main.tsx file imports index.css at top

webpack.config.js looks like this

import path from 'path';
import process from 'process';
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import Dotenv from 'dotenv-webpack';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';

export default (env, argv) => {
   const isDev = argv.mode === 'development';
   const enableAnalyzer = process.env.VITE_ENABLE_ANALYZER === 'true';

   return {
      entry: path.resolve(process.cwd(), 'src', 'main.tsx'),
      output: {
         path: path.resolve(process.cwd(), 'dist'),
         filename: '[name].[contenthash].js',
         publicPath: '/',
      },
      mode: isDev ? 'development' : 'production',
      devtool: isDev ? 'eval-source-map' : 'source-map',

      target: 'web',

      module: {
         rules: [
            {
               test: /\.[jt]sx?$/,
               exclude: /node_modules/,
               use: {
                  loader: 'babel-loader',
                  options: {
                     presets: [
                        ['@babel/preset-env', { targets: { esmodules: true } }],
                        ['@babel/preset-react', { runtime: 'automatic' }],
                        '@babel/preset-typescript',
                     ],
                     plugins: [isDev && import.meta.resolve('react-refresh/babel')].filter(Boolean),
                  },
               },
            },
            {
               test: /\.css$/i,
               use: [
                  isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
                  {
                     loader: 'css-loader',
                     options: {
                        importLoaders: 1,
                        url: false,
                     },
                  },
                  {
                     loader: 'postcss-loader',
                     options: {
                        postcssOptions: {
                           plugins: ['@tailwindcss/postcss', 'autoprefixer'],
                        },
                     },
                  },
               ],
            },
            {
               test: /\.(png|jpe?g|gif|svg|eot|ttf|woff2?)$/i,
               type: 'asset',
            },
         ],
      },

      resolve: {
         extensions: ['.tsx', '.ts', '.jsx', '.js'],
         alias: {
            '@': path.resolve(path.dirname(new URL(import.meta.url).pathname), 'src'),
            heap: path.resolve(path.dirname(new URL(import.meta.url).pathname), 'src/heap.js'),
         },
      },

      devServer: {
         port: 3000,
         historyApiFallback: true,
         hot: true,
         open: true,
      },

      plugins: [
         new HtmlWebpackPlugin({ template: 'index.html' }),
         new CopyWebpackPlugin({
            patterns: [
               {
                  from: 'public',
                  to: '',
                  globOptions: {
                     ignore: ['**/auth0/**', '**/_redirects'], // Exclude auth0 folder and _redirects as they might be handled separately
                  },
               },
            ],
         }),
         new Dotenv({ path: `.env.${isDev ? 'development' : 'production'}`, systemvars: true }),
         isDev && new ReactRefreshWebpackPlugin(),
         !isDev &&
            new MiniCssExtractPlugin({
               filename: '[name].[contenthash].css',
            }),
         enableAnalyzer &&
            new BundleAnalyzerPlugin({
               // bundle visualizer
               analyzerMode: 'static',
               openAnalyzer: true,
               reportFilename: 'analyse.html',
            }),
         new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(argv.mode),
         }),
      ].filter(Boolean),

      optimization: {
         runtimeChunk: 'single',
         splitChunks: {
            chunks: 'all',
            cacheGroups: {
               vendor: {
                  test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom)[\\/]/,
                  name: 'vendor',
                  priority: 10,
               },
               external: {
                  test: /[\\/]node_modules[\\/](?:@phosphor-icons\/react|@auth0\/auth0-react)[\\/]/,
                  name: 'external',
                  priority: 9,
               },
               markdown: {
                  test: /[\\/]node_modules[\\/](react-markdown|rehype-raw)[\\/]/,
                  name: 'markdown',
                  priority: 8,
               },
               others: {
                  test: /[\\/]node_modules[\\/](downshift|react-datepicker|axios|lodash-es)[\\/]/,
                  name: 'others',
                  priority: 7,
               },
            },
         },
      },
   };
};

postcss.config.js looks like this

import tailwindcss from '@tailwindcss/postcss';
import autoprefixer from 'autoprefixer';

export default {
   plugins: [tailwindcss(), autoprefixer()],
};

index.css look like this ...

/* Toastify css */
@import url('./utils/notifications/notifications.css');
@import './tailwind.css';

/* inter-regular - latin */
@font-face {
   font-display: swap;
   font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   src: url('/fonts/inter-v12-latin-regular.woff2') format('woff2');
}
/* inter-500 - latin */
@font-face {
   font-display: swap;
   font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
   src: url('/fonts/inter-v12-latin-500.woff2') format('woff2');
}
/* inter-600 - latin */
@font-face {
   font-display: swap;
   font-family: 'Inter';
   font-style: normal;
   font-weight: 600;
   src: url('/fonts/inter-v12-latin-600.woff2') format('woff2');
}
/* inter-700 - latin */
@font-face {
   font-display: swap;
   font-family: 'Inter';
   font-style: normal;
   font-weight: 700;
   src: url('/fonts/inter-v12-latin-700.woff2') format('woff2');
}

body {
   @apply antialiased;
   @apply text-slate-900;
   font-family: 'Inter', sans-serif;
   overflow-y: scroll !important;
}

tailwind.css look like this

@import 'tailwindcss';
@import 'tailwindcss/preflight';
@import 'tailwindcss/utilities';

/* Toastify css */
@import url('./utils/notifications/notifications.css');
@import './tailwind.css';

/* inter-regular - latin */
@font-face {
   font-display: swap;
   font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   src: url('/fonts/inter-v12-latin-regular.woff2') format('woff2');
}
/* inter-500 - latin */
@font-face {
   font-display: swap;
   font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
   src: url('/fonts/inter-v12-latin-500.woff2') format('woff2');
}
/* inter-600 - latin */
@font-face {
   font-display: swap;
   font-family: 'Inter';
   font-style: normal;
   font-weight: 600;
   src: url('/fonts/inter-v12-latin-600.woff2') format('woff2');
}
/* inter-700 - latin */
@font-face {
   font-display: swap;
   font-family: 'Inter';
   font-style: normal;
   font-weight: 700;
   src: url('/fonts/inter-v12-latin-700.woff2') format('woff2');
}

body {
   @apply antialiased;
   @apply text-slate-900;
   font-family: 'Inter', sans-serif;
   overflow-y: scroll !important;
}

packages version -
"@tailwindcss/postcss": "^4.1.11" "tailwindcss": "^4.1.11", "webpack": "^5.99.9",

[wongjn]

Could you clarify what you mean by "not [generating]"? Consider providing a git repo that reproduces the unexpected behavior.

[irfankhan501]

when runing tailwind styles are not loading, when runing build main css file not getting generated which should have tailwind classes

[wongjn]

Hmm, OK. Consider providing a git repo that reproduces the unexpected behavior.

[irfankhan501]

not possible to provide repo, there in no console error just tailwind styles not loading

[wongjn]

The repo doesn't have to be same as the project you're working on, it can be a basic copy.

[rozsazoltan]

Problem

postcss.config.js - From v4 onwards, make sure to use .mjs and rename it accordingly: postcss.config.mjs

• tailwindcss.com/docs/upgrade-guide#using-postcss
• tailwindcss.com/docs/installation/using-postcss

Also, I would use the PostCSS object-syntax instead of an array:

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

Note: Since I've been using Vite, I rarely work with Webpack anymore, so I don't really know how it works with .mjs files or how it handles the recommended object syntax.

Review

Please forgive me for being a bit confused, but one thing really struck me: why are you importing tailwind.css into itself again? I've never done that before... what does that cause? An infinite loop?

By the way, for tailwindcss, basically one line is enough.

• https://tailwindcss.com/docs/upgrade-guide#removed-tailwind-directives

@import 'tailwindcss';
/* @import 'tailwindcss/preflight'; */
/* @import 'tailwindcss/utilities'; */

If for some reason you need the longer version, it looks like this without the @import "tailwindcss";:

• https://tailwindcss.com/docs/preflight

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

Also, you are importing notifications.css twice - once in index.css and again in tailwind.css.

Also, completely unrelated to the problem, but in v4 there is no need for autoprefixer:

• https://tailwindcss.com/docs/upgrade-guide#using-postcss

And using @layer is recommended:

• What is the purpose of the Tailwind @layer directive?
• From v4 the reset style cannot be overridden by TailwindCSS classes

@layer base {
  body {
    @apply antialiased;
    @apply text-slate-900;
    font-family: 'Inter', sans-serif;
    overflow-y: scroll !important;
  }
}