webpack - Laravel Mix don't build with Tailwind v4 - Stack Overflow

When I use Laravel Mix with the mix watch command, changes in an imported scss file do not cause a rebuild if I include TailwindCSS

app.scss

@forward "tailwindcss";
@forward 'test.scss';
    
body {
  // background-color: black; // build works with this change
}

test.scss

body {
  background-color: black; // build does not work with this change
}

webpack.mix.js

const mix = require('laravel-mix');
const path = require('path');

mix.setPublicPath(path.resolve( "./" ))

mix.options({
  postCss: [
    require('@tailwindcss/postcss'),
    require('autoprefixer'),
  ],
})
  .sass('assets/styles/app.scss', 'assets/build')
  .js("assets/scripts/app.js", "assets/build")

If @forward tailwindcss; is removed, changes in test.scss cause a code rebuild.

package.json

{
  "scripts": {
    "dev": "npm run json-to-scss && mix",
    "watch": "npm run json-to-scss && mix watch",
    "prod": "npm run json-to-scss && mix --production",
    "json-to-scss": "json-to-scss ./data.json ./assets/styles/core/data.scss"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.20",
    "browser-sync": "^3.0.3",
    "browser-sync-webpack-plugin": "^2.3.0",
    "laravel-mix": "^6.0.49",
    "postcss": "^8.5.1",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.83.4",
    "sass-loader": "^12.6.0",
    "tailwindcss": "^4.0.0"
  },
  "dependencies": {
    "@tailwindcss/postcss": "^4.0.0",
    "gsap": "^3.12.7",
    "headroom.js": "^0.12.0",
    "json-to-scss": "^1.6.2",
    "lenis": "^1.1.20",
    "uniqid": "^5.4.0"
  }
}

When I use Laravel Mix with the mix watch command, changes in an imported scss file do not cause a rebuild if I include TailwindCSS

app.scss

@forward "tailwindcss";
@forward 'test.scss';
    
body {
  // background-color: black; // build works with this change
}

test.scss

body {
  background-color: black; // build does not work with this change
}

webpack.mix.js

const mix = require('laravel-mix');
const path = require('path');

mix.setPublicPath(path.resolve( "./" ))

mix.options({
  postCss: [
    require('@tailwindcss/postcss'),
    require('autoprefixer'),
  ],
})
  .sass('assets/styles/app.scss', 'assets/build')
  .js("assets/scripts/app.js", "assets/build")

If @forward tailwindcss; is removed, changes in test.scss cause a code rebuild.

package.json

{
  "scripts": {
    "dev": "npm run json-to-scss && mix",
    "watch": "npm run json-to-scss && mix watch",
    "prod": "npm run json-to-scss && mix --production",
    "json-to-scss": "json-to-scss ./data.json ./assets/styles/core/data.scss"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.20",
    "browser-sync": "^3.0.3",
    "browser-sync-webpack-plugin": "^2.3.0",
    "laravel-mix": "^6.0.49",
    "postcss": "^8.5.1",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.83.4",
    "sass-loader": "^12.6.0",
    "tailwindcss": "^4.0.0"
  },
  "dependencies": {
    "@tailwindcss/postcss": "^4.0.0",
    "gsap": "^3.12.7",
    "headroom.js": "^0.12.0",
    "json-to-scss": "^1.6.2",
    "lenis": "^1.1.20",
    "uniqid": "^5.4.0"
  }
}

• webpack
• sass
• tailwind-css
• laravel-mix
• tailwind-css-4

Share Follow edited Jan 31 at 13:48 rozsazoltan 11.3k66 gold badges2121 silver badges5959 bronze badges asked Jan 30 at 10:03 Martin PaulMartin Paul 2144 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The installation of TailwindCSS in v4 has been simplified compared to v3. There is no need to install PostCSS and Autoprefixer.

• Upgrade guide - TailwindCSS v3 to v4
• Problem installing TailwindCSS after "npx tailwindcss init -p" command - StackOverflow
• How to upgrade TailwindCSS? - StackOverflow
• How to setting Tailwind CSS v4 global class? - StackOverflow

Deprecated preprocessors support

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.

• Compatibility - TailwindCSS v4 Docs
• How to upgrade TailwindCSS? - StackOverflow

Specifically for Laravel Mix and/or Webpack, keep the following installation steps in mind.

Installing Packages

You need to install TailwindCSS, its PostCSS plugin, and PostCSS itself.

In Webpack, you will configure the PostCSS processor to handle CSS files, which, thanks to the @tailwindcss/postcss package, will be processed using TailwindCSS. Additionally, you need to install the postcss-loader package to integrate Webpack with PostCSS.

• Get started with Tailwind CSS with PostCSS - TailwindCSS v4 Docs
• How to use postcss-loader - Webpack v5 Docs
• How to install Laravel Mix - Laravel Mix v6 Docs

# Required due to PostCSS and TailwindCSS
# - to "Configuration (Option: 1 / 2 / 3)"
npm install -D tailwindcss @tailwindcss/postcss postcss

# Required due to Webpack
# - to "Configuration (Option: 1 / 2 / 3)"
npm install -D postcss-loader

# Required due to Laravel Mix
# - to "Configuration (Option: 1)"
# Note: If you are using Webpack without Laravel Mix, then you can omit this.
npm install -D laravel-mix

Configuration (Option: 1 with Laravel Mix)

If you are using Laravel Mix to load Webpack, you need to load the laravel-mix package and pass the @tailwindcss/postcss package through PostCSS. The Laravel Mix .postCss() function automatically uses the installed postcss-loader package.

webpack.mix.js

const mix = require('laravel-mix');

mix.postCss('resources/css/main.css', 'public/css', [
  require('@tailwindcss/postcss'),
]);

(or) Configuration (Option: 2 with only Webpack)

In the Webpack configuration file, you need to specify the files that should be processed with PostCSS. These files will be handled by postcss-loader. This is where you can provide custom settings for PostCSS and specify that it should use the @tailwindcss/postcss package.

webpack.mix.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // only accept filenames with ends of `.css`
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "@tailwindcss/postcss",
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

Note: /\.css$/ enforces a strictly lowercase CSS match, while /\.css$/i with the i flag, uppercase variations (.CSS, .Css, etc.) are also accepted.

(or) Configuration (Option: 3 with postcss.config.js)

If you don't want to include all PostCSS settings directly in the Webpack configuration, you can alternatively use postcss.config.js, as recommended in the documentation.

postcss.config.js

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

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // only accept filenames with ends of `.css`
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};

Note: /\.css$/ enforces a strictly lowercase CSS match, while /\.css$/i with the i flag, uppercase variations (.CSS, .Css, etc.) are also accepted.

TailwindCSS customization

From v4 onwards, tailwind.config.js is no longer required. TailwindCSS now recommends using the new CSS-first configuration by default. In your main CSS file, you only need to add a single line for it to work:

main.css (Your main CSS file.)

@import "tailwindcss";

• CSS-first configuration instead of tailwind.config.js - TailwindCSS v4 Docs
• Use @config directive to legacy JavaScript-config - StackOverflow