5

I am trying to set up a starter for a react-static site including tailwindcss v1 and postcss-import. I cannot get the build or start processes to resolve the @import "tailwindcss/xxx" directives. I get the same outcome with tailwindcss v0.7.4

This is what I have done ...

  1. react-static create selecting basic option
  2. yarn add tailwindcss@next
  3. yarn add postcss-import
  4. yarn tailwind init
  5. Added postcss.config.js
  6. Replaced content of src/app.css with the 3 @import statements

I have tried many options such as starting with other existing projects, changing the @import arguments. eg "../tailwindcss, "src/tailwindcss, "../src/tailwindcss, etc

Basically nothing I have done changed the error, just the name of the file which cannot be resolved.

However, there are 2 additional observations which are may be relevant. Firstly, tailwind is installed and npx tailwind build src/styles.css -o src/app.css generates a working tailwind file from styles.css.

Secondly, the postcss-import is simply not happening - changing it has no effect on the outcome.

// tailwind.config.js
module.exports = {
  theme: {},
  variants: {},
  plugins: []
}

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

/* src/app.css */
@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

The error message is

  Error: ✖ ｢wdm｣: 
  ERROR in /Users/tech/Projects/ReactStatic/my-static-site/src/app.css
  Module build failed (from /Users/tech/Projects/ReactStatic/my-static-site/node_modules/extract-css-chunks-webpack-plugin/d  ist/loader.js):
  ModuleNotFoundError: Module not found: Error: Can't resolve './tailwindcss/base' in '/Users/tech/Projects/ReactStatic/my-s  tatic-site/src'
      at factory.create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/Compilation.js:823:10)
      at factory (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
      at resolver (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
      at asyncLib.parallel (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/NormalModuleFactory.js:  224:22)
      at /Users/tech/Projects/ReactStatic/my-static-site/node_modules/neo-async/async.js:2825:7
      at /Users/tech/Projects/ReactStatic/my-static-site/node_modules/neo-async/async.js:6886:13
      at normalResolver.resolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/NormalModuleFactor  y.js:214:25)
      at doResolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:15:1)
      at resolver.doResolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/UnsafeCachePl  ugin.js:37:5)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:15:1)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:27:1)
      at resolver.doResolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/DescriptionFi  lePlugin.js:42:38)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn43 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:  33:10), <anonymous>:16:1)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:27:1)
      at resolver.doResolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/DescriptionFi  lePlugin.js:42:38)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn1 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:16:1)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:15:1)
      at fs.stat (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js  :22:13)
      at process.nextTick (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/CachedInputFile  System.js:73:15)
      at processTicksAndRejections (internal/process/task_queues.js:79:9)
   @ /Users/tech/Projects/ReactStatic/my-static-site/src/App.js 7:0-19
   @ /Users/tech/Projects/ReactStatic/my-static-site/src/index.js
   @ multi react-hot-loader/patch ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js index.js

  Error: ✖ ｢wdm｣: 
  ERROR in /Users/tech/Projects/ReactStatic/my-static-site/src/app.css
  Module build failed (from /Users/tech/Projects/ReactStatic/my-static-site/node_modules/extract-css-chunks-webpack-plugin/d  ist/loader.js):
  ModuleNotFoundError: Module not found: Error: Can't resolve './tailwindcss/base' in '/Users/tech/Projects/ReactStatic/my-s  tatic-site/src'
      at factory.create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/Compilation.js:823:10)
      at factory (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
      at resolver (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
      at asyncLib.parallel (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/NormalModuleFactory.js:  224:22)
      at /Users/tech/Projects/ReactStatic/my-static-site/node_modules/neo-async/async.js:2825:7
      at /Users/tech/Projects/ReactStatic/my-static-site/node_modules/neo-async/async.js:6886:13
      at normalResolver.resolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/NormalModuleFactor  y.js:214:25)
      at doResolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:15:1)
      at resolver.doResolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/UnsafeCachePl  ugin.js:37:5)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:15:1)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:27:1)
      at resolver.doResolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/DescriptionFi  lePlugin.js:42:38)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn43 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:  33:10), <anonymous>:16:1)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:27:1)
      at resolver.doResolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/DescriptionFi  lePlugin.js:42:38)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn1 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:16:1)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:15:1)
      at fs.stat (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js  :22:13)
      at process.nextTick (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/CachedInputFile  System.js:73:15)
      at processTicksAndRejections (internal/process/task_queues.js:79:9)
   @ /Users/tech/Projects/ReactStatic/my-static-site/src/App.js 7:0-19
   @ /Users/tech/Projects/ReactStatic/my-static-site/src/index.js
   @ multi react-hot-loader/patch ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js index.js

I expected that the dev server would have started after the source had been processed.

Full source is available at https://gitlab.com/support96/my-static-site.git

nbtech
  • 51
  • 5

1 Answers1

0

Hey I struggled on this issue today, managed to work it out and made a library to hopefully help people out.

https://github.com/dev-warner/react-static-plugin-tailwindcss

In an existing react-static site run:

$ yarn add react-static-plugin-tailwindcss -D

Then add the plugin to your static.config.js:

export default {
  plugins: ["react-static-plugin-tailwindcss"]
};

Now you can add @tailwind directives to your .css files

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

Overview of what the plugin does is just add tailwindcss to your postcss plugins.

Object.assign(postcssLoader.options, {
  plugins: [require("tailwindcss"), ...(plugins.length ? plugins : [])]
});
Joe Warner
  • 3,335
  • 1
  • 14
  • 41