The problem

After tailwind was used in the project, the run start and run build speed was much slower

To solve

  1. Custom onetailwindThe configuration filetailwind.config.js(Skip this step if it is already defined.)

  2. inpackage.jsonAdd a dependency to:"Tailwindcss - cli" : "^ 0.1.2",
  3. Custom onewebpack plugin: MyPlugin(Plugin name change), and put in the project and path, the code is as follows
const childProcess = require('child_process')
// Gaze is a tool for listening for file changes
const Gaze = require('gaze');
// There is a more user-friendly console
const consola = require('consola')

class MyPlugin {
  // Define 'apply' as its prototype method, which takes compiler as an argument
  apply(compiler) {
    // Run build will run this hook
    compiler.hooks.beforeRun.tapAsync(
      'MyPlugin'.(compiler, callback) = > {
        this.compile(callback)
      }
    );

    let isInitial = true
    // Run dev will run this hook
    compiler.hooks.watchRun.tapAsync('MyPlugin'.(compiler, callback) = > {
      if(! isInitial)return callback()
      isInitial = false

      var gaze = new Gaze('tailwind.config.js')
      gaze.on('all'.() = > this.compile())

      return this.compile(callback); })}compile(cb) {
    const start = +new Date(a)try {
      / /. / SRC/styles/tailwind. CSS this file is the tailwind atomic class reference documents,
      // For example, the contents of the file might be as follows:
      // @tailwind base;
      // @tailwind components;
      // @tailwind utilities;
      / /... Some custom styles...
      childProcess.execSync('.\\node_modules\\.bin\\tailwindcss-cli build ./src/styles/tailwind.css -c ./tailwind.config.js -o ./src/styles/_tailwind.css')}catch(e) {
      childProcess.execSync('./node_modules/.bin/tailwindcss-cli build ./src/styles/tailwind.css -c ./tailwind.config.js -o ./src/styles/_tailwind.css')
    }
    consola.success('Tailwind compiled successfully in' + (+new Date() - start) / 1000 + 's')

    cb && cb()
  }
}

module.exports = MyPlugin
Copy the code
  1. This plugin is then introduced into the Webpack
  2. To get rid ofpostcssReferenced in the configurationtailwindcssThe plug-in
  3. Remove pair declarations from code@tailwind components;,@tailwind utilities,@tailwind baseFile reference, add pairsrc/styles/_tailwind.css(This plug-in will generate this file)

Analysis of the

The underlying reason may be postCSS, which I haven’t analyzed, but one thing I’ve noticed is that compiling tailwind directly from the command line takes only a few seconds, while integrating with PostCSS adds nearly a minute or more. So what this plug-in does is compile tailwind on the command line before the project is compiled and generate the file SRC /styles/_tailwind. CSS, which was introduced in step 5 above, so that tailwind’s style takes effect

The measured effect of my project

Run Dev automatically publishes from 6m to 4m from 1m20s to 40s bamboo