Npm run build and watch extremely slow

user_14722777 0
Viewed 4596

I'm trying to create a basic Tailwind starter project and when I try to run the npm run build or npm run watch command, it takes about 30-60 seconds to make a change. Here is my setup:

package.json:

{
  "name": "base",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "postcss css/style.css -o public/build/style.css",
    "watch:css": "onchange 'css/*.css' -- npm run build"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^10.0.3",
    "postcss": "^8.1.10",
    "postcss-cli": "^8.3.0",
    "tailwindcss": "^2.0.1",
    "watch": "^1.0.2"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^3.0.0",
    "cssnano": "^4.1.10",
    "onchange": "^7.1.0"
  }
}

postcss.config.css:

const purgecss = require('@fullhuman/postcss-purgecss')

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('cssnano')({
           preset: 'default',
       }),
    // purgecss({
    //    content: ['./**/*.html'],
    //    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    //  })
  ]
}

directories:

--public
    build
        main.css
   index.html
--src
    css
        tailwind.css
--package.json
--postcss.config.js
--tailwind.config.js
postcss tailwind-css npm css html
2 Answers
user_120673720

Can you please check the below code? Hope it will work for you. You need to modify your package.json code like the below code.

"scripts": {
  "start": "npm run watch:css && react-scripts start",
  "build": "npm run build:css && react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "build:css": "postcss css/style.css -o public/build/style.css",
  "watch:css": "postcss css/style.css -o public/build/style.css"
}

After that, you need to restart your project using the below command so that this will build and watch your tailwind file automatically.

npm start
user_122138960
Related