Unable to "compile" tailwindcss components and utilities

[kevinvalk]

• Operating System: Windows 10
• Node Version: v12.18.4
• NPM Version: 6.14.6
• webpack Version: 5.0.0-rc.0 (webpack-cli 4.0.0-rc.0)
• postcss-loader Version: 4.0.2

I have a pure tailwind main.css that I am trying to bundle using webpack 5 assets system.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Expected Behavior

Compiled main.css that contains all of tailwindcss

Actual Behavior

However, while postcss is able to resolve and include "tailwindcss/base", it fails on components and utilities. With the following error:

ERROR in ./assets/css/main.css
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read property 'type' of undefined
    at C:\Users<redacted>\omniasoft\assets\css\main.css:2:1
    at AtRule.normalize (C:\<redacted>\node_modules\tailwindcss\node_modules\postcss\lib\container.js:673:22)
    at AtRule.prepend (C:\<redacted>\node_modules\tailwindcss\node_modules\postcss\lib\container.js:413:24)
    at AtRule.prepend (C:\<redacted>\node_modules\tailwindcss\node_modules\postcss\lib\at-rule.js:64:73)
    at C:\<redacted>\node_modules\tailwindcss\lib\lib\substituteResponsiveAtRules.js:44:27
    at C:\<redacted>\node_modules\postcss\lib\container.js:159:16
    at C:\<redacted>\node_modules\postcss\lib\container.js:82:18
    at AtRule.each (C:\<redacted>\node_modules\postcss\lib\container.js:68:16)
    at AtRule.walk (C:\<redacted>\node_modules\postcss\lib\container.js:79:17)
    at AtRule.walkAtRules (C:\<redacted>\node_modules\postcss\lib\container.js:157:17)
    at C:\<redacted>\node_modules\tailwindcss\lib\lib\substituteResponsiveAtRules.js:38:19

NOTE: I did downgrade to postcss-loader 3.0.0 and I was able to "compile" the same main.css file. This was using the exact same configuration and versions. Maybe this is a regression somehow?

Code

webpack.config.js

module.exports = {
	mode: "development",
	entry: {
		styles: "./assets/css/main.css",
	},
	module: {
		rules: [
			{
				test: /\.css$/i,
				type: "asset/resource",
				use: [
					{
						loader: "postcss-loader",
						options: {
							postcssOptions: {
								plugins: [require("tailwindcss")],
							},
						},
					},
				],
			},
		],
	},
};

How Do We Reproduce?

• install required packages

  "devDependencies": {
    "postcss": "^8.0.8",
    "postcss-loader": "^4.0.2",
    "tailwindcss": "^1.8.10",
    "webpack": "^5.0.0-0",
    "webpack-cli": "^4.0.0-0",
  },

• assets/css/main.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

• webpack.config.js (see above)
• execute webpack to build

[alexander-akait]

Please open an issue in tailwindcss repo, you can see what error from tailwindcss\lib\lib\substituteResponsiveAtRules

[alexander-akait]

postcss@8 still have bugs, maybe bug on postcss side, we can't fix it here, we nothing do with your code, just run postcss

[kevinvalk]

Thanks for quick response.

This is actually the same/related to issue tailwindlabs/tailwindcss#2396