3

I am trying to create a brand new react application from scratch using Webpack 5, Tailwind CSS, with Typescript. After combining a few tutorials together I am lost on how to get the postcss-loader to work for Tailwind. If i put in regular .css, it seems to work but if I import @tailwind as I am trying to do in global.tailwind.css - webpack errors out with the error below.

Question:

Why are the tailwind import directives not importing using Webpack? If I hard code css it seems to work fine.

I came across this Stack Overflow issue but the attached links are no longer working.

Any suggestions or help would be fantastic as I am new to starting react from the ground up. I used CRA (create-react-app) before this. If there is a file I am missing that would help debug this issue please let me know and I will edit the question.

Template 1 - Github

Template 2 - Hash Interactive

Template 3 - Blog

Thanks!

Error in Browser:

Compiled with problems:X

ERROR in ./src/global.tailwind.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/global.tailwind.css)

Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: postcss.config.js: Emit skipped
    at getOutput (/home/<omitted work directory>/<project name>/node_modules/ts-node/src/index.ts:938:17)
    at Object.compile (/home/<omitted work directory>/<project name>/node_modules/ts-node/src/index.ts:1237:30)
    at Module.m._compile (/home/<omitted work directory>/<project name>/node_modules/ts-node/src/index.ts:1364:30)
    at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Object.require.extensions.<computed> [as .js] (/home/<omitted work directory>/<project name>/node_modules/ts-node/src/index.ts:1368:12)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at module.exports (/home/<omitted work directory>/<project name>/node_modules/postcss-loader/node_modules/import-fresh/index.js:28:9)

Webpack.config.ts

import path from 'path'
import { Configuration, HotModuleReplacementPlugin } from 'webpack'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
import ESLintPlugin from 'eslint-webpack-plugin'
import { CleanWebpackPlugin } from 'clean-webpack-plugin'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'

const config: Configuration = {
  mode: "development",
  output: {
    publicPath: "/",
    clean: true,
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  entry: "./src/index.tsx",
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/i,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env",
              "@babel/preset-react",
              "@babel/preset-typescript",
            ],
          },
        },
      },
      {
        test: /\.(sa|sc|c)ss$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { modules: true, sourceMap: true },
          },
          {
            loader: 'postcss-loader',
            options: { sourceMap: true },
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: true },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  plugins: [
    new CleanWebpackPlugin(),

    new HtmlWebpackPlugin({
      template: "public/index.html",
      filename: 'index.html'
    }),

    new HotModuleReplacementPlugin(),

    new ForkTsCheckerWebpackPlugin({
      async: false
    }),

    new MiniCssExtractPlugin({
      filename: '[name].bundle.css',
      chunkFilename: '[id].[contenthash].css'
    }),

    new ESLintPlugin({
      extensions: ["js", "jsx", "ts", "tsx"],
    }),
  ],
  devtool: "inline-source-map",
  devServer: {
    static: path.join(__dirname, "build"),
    historyApiFallback: true,
    port: 4000,
    open: true,
    hot: true
  },
};

export default config;

Package.json

{
  "name": "click-n-file",
  "version": "1.0.0",
  "description": "Click n' File is a document storage / retrieval system for finding all things loan related",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development --config webpack.dev.config.ts --hot --history-api-fallback --progress",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.config.ts",
    "eslint": "eslint --ext .jsx --ext .js --ext .tsx --ext .ts src/",
    "eslint-fix": "eslint --fix --ext .jsx --ext .js --ext .tsx --ext .ts src/",
    "ci:install": "npm install",
    "ci:eslint": "npm run eslint",
    "ci:test": "react-scripts test --coverage --watchAll=false --passWithNoTests"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.15.8",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.0.0",
    "@babel/register": "^7.0.0",
    "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
    "@types/mini-css-extract-plugin": "^2.4.0",
    "@types/node": "^16.11.1",
    "@types/optimize-css-assets-webpack-plugin": "^5.0.4",
    "@types/react": "^17.0.30",
    "@types/react-dom": "^17.0.9",
    "@types/react-router-dom": "^5.3.1",
    "@types/tailwindcss": "^2.2.1",
    "@types/webpack-dev-server": "^4.3.1",
    "@typescript-eslint/eslint-plugin": "^5.1.0",
    "@typescript-eslint/parser": "^5.1.0",
    "autoprefixer": "^10.3.7",
    "babel-loader": "^8.0.0",
    "clean-webpack-plugin": "^4.0.0",
    "core-js": "^3.0.0",
    "css-loader": "^6.4.0",
    "css-minimizer-webpack-plugin": "^3.1.1",
    "eslint": "^8.0.1",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-typescript": "^14.0.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-webpack-plugin": "^3.0.1",
    "fork-ts-checker-webpack-plugin": "^6.3.4",
    "html-webpack-plugin": "^5.4.0",
    "mini-css-extract-plugin": "^2.4.2",
    "node-sass": "^6.0.1",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "postcss": "^8.3.9",
    "postcss-import": "^14.0.2",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "prettier": "^2.4.1",
    "sass": "1.32",
    "sass-loader": "^12.2.0",
    "source-map-loader": "^3.0.0",
    "style-loader": "^3.3.0",
    "terser-webpack-plugin": "^5.2.4",
    "ts-node": "^10.3.0",
    "tsconfig-paths-webpack-plugin": "^3.5.1",
    "typescript": "^4.0.0",
    "webpack": "^5.58.2",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.3.1"
  },
  "dependencies": {
    "postcss-cli": "^9.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0",
    "tailwindcss": "^2.2.17"
  }
}

global.tailwind.css (I have also tried scss)

@tailwind base;
@tailwind components;
@tailwind utilities;

// postcss.config.js
module.exports = {
  plugins: [
    require("tailwindcss")("./tailwind.config.js"),
    require("autoprefixer"),
  ],
}

tailwind.config.js

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

EDIT:

I have also tried

/* ./src/index.scss */
@import '~tailwindcss/base';
@import '~tailwindcss/components';
@import '~tailwindcss/utilities';

Which links to the correct files (node_modules/tailwindcss), but still gives me the error above.

EDIT 2:

I have also tried removing the postcss-loader and installing the latest version (6.2.0) rather than 3.0.0. Still no luck

William Zink
  • 189
  • 4
  • 15

1 Answers1

-1

I actually had same issue. After I read your question, I tried same as you did and created a global-tailwind.css and import it inside the index.tsx and it worked for me.

The only difference I made was instead of using "@tailwind" I use "@import" inside the global-tailwind.css

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

webpack config block for css

  {
    test: /\.css$/i,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1
        }
      },
      'postcss-loader'
    ]
  }

related package I have

/* package.json */
"postcss": "^8.3.9",
"postcss-import": "^14.0.2",
"postcss-loader": "^6.2.0",
"autoprefixer": "^10.3.7",
"tailwindcss": "^2.2.17",

And my postcss.config

const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');
const postcss = require('postcss-import');

module.exports = {
  plugins: [postcss, tailwindcss('./tailwind.config.js'), autoprefixer]
};

I also got this reference from the tailwind docs if you are using postcss

https://tailwindcss.com/docs/using-with-preprocessors

Carl Sare
  • 191
  • 1
  • 14