Postcss loader dont recognize custom tailwind class after Angular update

user_14693923 0
Viewed 1119

I'v just updated our project from Angular 10.1 to 13 due to vurnabilitys and now when i try to serve the project i got the following error:

./src/styles/global.css - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): HookWebpackError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): SyntaxError (13:3) C:\ProjectPath\src\styles\base\reset.scss The text-blue class does not exist. If text-blue is a custom class, make sure it is defined within a @layer directive.

Currently postcss 8.4.5, postcss-import 14.0.2, postcss-loader 4.0.3, postcss-nested 5.06 and tailwindcss 3.0.13 is installed this is my webpackConfig(https://pastebin.com/bsuD11b7) and this my angular.json(https://pastebin.com/hfm7SENi).

If futher information is needed just ask for it.

postcss-loader angular
1 Answers

I have it, it seems that in the new version for example the following bg-blue-default and bg-blue-dark is generated instead of bg-blue and bg-blue-dark as before.

i just have to replace the old bg-blue with bg-blue-default

colors: {
  blue: {
    default: "#003460",
    dark: "#001f39"
  },
user_146939230
Related