Search code examples
webpackelectronbabeljstailwind-csspostcss

TailwindCSS with Webpack project

Excuse me, I'm trying to make my Electronjs project which use TailwindCSS (PostCSS plugin), Webpack v5, babel, eslint and stylelint but I ran to this errors (when run webpack serve --color --progress --config webpack.dev.js). I appreciated your help A picture of my error is here: Error

Log is here if you want it too:

ERROR in ./src/main.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/prettier-loader/prettier-loader.js):
SyntaxError: Leading decorators must be attached to a class declaration. (1:9)
> 1 | @import 'tailwindcss/base';
    |         ^
  2 | @import 'tailwindcss/components';
  3 | @import 'tailwindcss/utilities';
  4 | @import './css/font.css';
    at Us (D:\genzoc\node_modules\prettier\parser-babel.js:22:7277)
    at tn (D:\genzoc\node_modules\prettier\parser-babel.js:22:66392)
    at Object.parse (D:\genzoc\node_modules\prettier\parser-babel.js:22:334269)
    at Object.parse$a [as parse] (D:\genzoc\node_modules\prettier\index.js:13652:19)
    at coreFormat (D:\genzoc\node_modules\prettier\index.js:15183:16)
    at formatWithCursor$1 (D:\genzoc\node_modules\prettier\index.js:15423:14)
    at D:\genzoc\node_modules\prettier\index.js:60171:12
    at Object.format (D:\genzoc\node_modules\prettier\index.js:60191:12)
    at Object.module.exports (D:\genzoc\node_modules\prettier-loader\prettier-loader.js:98:31)
    at processResult (D:\genzoc\node_modules\webpack\lib\NormalModule.js:703:19)
    at D:\genzoc\node_modules\webpack\lib\NormalModule.js:809:5
    at D:\genzoc\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at D:\genzoc\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (D:\genzoc\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.module.exports (D:\genzoc\node_modules\prettier-loader\prettier-loader.js:100:12)
 @ ./src/main.js 1:0-20

My repo is here: https://github.com/Cokaps/GenZOC

Solution

  • Well, have you try to load postcss before other linters? (In your config, prettier-loader run before postcss. And you may want to disable those linters (moving to another file as linting is useless in your case, you're trying to lint dependencies)