vintasoftware/django-react-boilerplate

Tailwind configuration error

Closed this issue · 3 comments

shaheermudassar commented

I wanted to use Tailwind with frontend so i created index.css file and just followed tailwindcss config for react

index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;

and imported that to index.tsx

import App from "./App";
import "./index.css"

but getting this errro on running:

ERROR in ./frontend/js/index.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./frontend/js/index.css)
Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "postcss-preset-env" plugin failed: Cannot find module 'postcss-preset-env'
Require stack:

  • C:\Users\Shaheer Mudassar\Desktop\djreact\node_modules\postcss-loader\dist\utils.js
  • C:\Users\Shaheer Mudassar\Desktop\djreact\node_modules\postcss-loader\dist\index.js
  • C:\Users\Shaheer Mudassar\Desktop\djreact\node_modules\postcss-loader\dist\cjs.js
  • C:\Users\Shaheer Mudassar\Desktop\djreact\node_modules\loader-runner\lib\loadLoader.js
  • C:\Users\Shaheer Mudassar\Desktop\djreact\node_modules\loader-runner\lib\LoaderRunner.js
  • C:\Users\Shaheer Mudassar\Desktop\djreact\node_modules\webpack\lib\NormalModuleFactory.js
  • C:\Users\Shaheer Mudassar\Desktop\djreact\node_modules\webpack\lib\Compiler.js
  • C:\Users\Shaheer Mudassar\Desktop\djreact\node_modules\webpack\lib\webpack.js
  • C:\Users\Shaheer Mudassar\Desktop\djreact\node_modules\webpack\lib\index.js
  • C:\Users\Shaheer Mudassar\Desktop\djreact\node_modules\webpack-cli\lib\webpack-cli.js
  • C:\Users\Shaheer Mudassar\Desktop\djreact\node_modules\webpack-cli\lib\bootstrap.js
  • C:\Users\Shaheer Mudassar\Desktop\djreact\node_modules\webpack-cli\bin\cli.js
  • C:\Users\Shaheer Mudassar\Desktop\djreact\node_modules\webpack\bin\webpack.js
pamella commented

Hi @shaheermudassar,

You might find that installing the postcss-preset-env package resolves the error you faced. I ran npm install --save-dev postcss-preset-env on my end, and it worked as intended. Could you try that as well and let me know how it goes?

shaheermudassar commented

Hi @shaheermudassar,

You might find that installing the postcss-preset-env package resolves the error you faced. I ran npm install --save-dev postcss-preset-env on my end, and it worked as intended. Could you try that as well and let me know how it goes?

Thanks @pamella
I resolved that problem after installing postcss-preset-env.
It works perfect and by the way this is a great project.
Thanks for you all for providing this awesome boilerplate.

Just a recommendation that you could make a branch for tailwind css too like this bootstrap one.
Thanks.

  • 🚀1
pamella commented

Awesome, glad to hear that installing postcss-preset-env did the trick!

Thank you for all the feedback!

  • ❤️1