main.js file size is 37.1 MiB in development

Hello there,

I’ve setup a react project from scratch and installed tailwind css in it. I am unable to figure out why the file size is gone too high after this. Below are my configurations.

package.json

 "version": "1.0.0",
 "description": ",
 "main": "index.js",
 "scripts": {
   "start": "npm run watch:css && webpack-dev-server --mode development --open --config ./webpack.dev.js",
   "build": "npm run build:css && webpack --mode production --config ./webpack.prod.js",
   "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
   "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
   "@babel/core": "^7.11.6",
   "@babel/plugin-transform-runtime": "^7.11.5",
   "@babel/preset-env": "^7.11.5",
   "@babel/preset-react": "^7.10.4",
   "autoprefixer": "^9.8.6",
   "babel-loader": "^8.1.0",
   "babel-plugin-transform-class-properties": "^6.24.1",
   "css-loader": "^4.3.0",
   "file-loader": "^6.1.0",
   "html-webpack-plugin": "^4.5.0",
   "path": "^0.12.7",
   "postcss-cli": "^8.1.0",
   "sass": "^1.27.0",
   "sass-loader": "^10.0.2",
   "style-loader": "^1.3.0",
   "tailwindcss": "^1.8.12",
   "webpack": "^4.44.2",
   "webpack-cli": "^3.3.12",
   "webpack-dev-server": "^3.11.0",
   "webpack-merge": "^5.4.0"
 },
 "dependencies": {
   "@reach/router": "^1.3.4",
   "axios": "^0.20.0",
   "chart.js": "^2.9.3",
   "immutable": "^4.0.0-rc.12",
   "lodash": "^4.17.20",
   "react": "^16.13.1",
   "react-chartjs-2": "^2.10.0",
   "react-copy-to-clipboard": "^5.0.2",
   "react-dom": "^16.13.1",
   "react-redux": "^7.2.1",
   "react-table": "^7.6.0",
   "react-toastify": "^6.0.9",
   "redux": "^4.0.5",
   "redux-devtools-extension": "^2.13.8",
   "redux-saga": "^1.1.3",
   "redux-thunk": "^2.3.0",
   "web3": "^1.3.0"
 }
}

tailwind.css

@tailwind components;

@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

tailwind.config.js

  purge: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.jsx'
  ],
  theme: {
    extend: {
      colors: {
        'brand-green': '#AAEC2D',
        'brand-green-dark': '#7ABA00',
        'brand-green-200': '#eefbd5'
      },
      fontFamily: {
        display: ['Space Mono'],
        body: ['Rubik']
      }
    }
  },
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'active']
  },
  plugins: []
}

webpack.common.js

const HtmlWebPackPlugin = require('html-webpack-plugin');

const baseURL = path.resolve(__dirname, '');

module.exports = {
  entry: path.resolve(baseURL, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.(?:sc|c)ss$/i,
        exclude: /node_modules/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[hash]-[name].[ext]',
            },
          },
        ],
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: path.resolve( __dirname, 'public/index.html' ),
      filename: 'index.html',
      inject: 'body',
    })
  ]
};

webpack.dev.js

const common = require('./webpack.common');

module.exports = merge(common, {
  devServer: {
    historyApiFallback: true
  },
  devtool: 'inline-source-map',
  mode: 'development'
});

[RobinMalfait]

You have to add the postcss-loader for webpack, currently you are not using postcss. If you want to use @import "tailwindcss/tailwind.css" then you probably also want a nesting plugin https://tailwindcss.com/docs/using-with-preprocessors

Alternatively, to the nested plugin, you can use this:

/* ./src/assets/tailwind.css */

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

[mdrahiem]

@RobinMalfait First of all thanks much for your time. But the problem is not fixed. If I replace ./assets/main.css with './assets/tailwind.css' then the styles are no applied to the page (styles are broken). Otherwise when I try to use import "tailwindcss/tailwind.css" its throwing an error.