Failed to set up Tailwind in Angular 9 and 10 - TypeError: Cannot read property 'charCodeAt' of undefined in postcss

[paranerd]

Describe the problem:

I'm trying to use Tailwind in my Angular 10 project which failes with the following errors:

Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.27, but postcss-functions uses 6.0.23. Perhaps this is the source of the error below.

ERROR in ./src/styles.scss (./node_modules/@angular-builders/custom-webpack/node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/@angular-builders/custom-webpack/node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/@angular-builders/custom-webpack/node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/postcss-loader/dist/cjs.js??ref--17!./src/styles.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read property 'charCodeAt' of undefined

Here are the steps I took:

ng new tailwind-app

npm i tailwindcss postcss-import postcss-loader postcss-scss @angular-builders/custom-webpack -D

Added those at the beginning of styles.scss:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Created this webpack.config.js in the root of my project:

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            ident: "postcss",
            syntax: "postcss-scss",
            plugins: [
              require("postcss-import"),
              require("tailwindcss"),
              require("autoprefixer"),
            ],
          },
        },
      },
    ],
  },
};

Used those to update my angular.json:

ng config projects.tailwind-app.architect.build.builder @angular-builders/custom-webpack:browser
ng config projects.tailwind-app.architect.build.options.customWebpackConfig.path webpack.config.js
ng config projects.tailwind-app.architect.serve.builder @angular-builders/custom-webpack:dev-server
ng config projects.tailwind-app.architect.serve.options.customWebpackConfig.path webpack.config.js

Then serve the app using:

ng serve

The error exists with Angular 9.1.12 (LTS) as well as 10.1.2.

[BogdanDarius]

There is a problem with postcss 8.0.7. Downgrade to postcss 8.0.6.
postcss/postcss#1419

[paranerd]

I never actually installed postcss - it just came as a dependency with the highest version of 7.0.32

[zenhuw]

found this issue as well, same reproduction step

[paranerd]

Fixed it:

npm i -D postcss-scss@2.1.1

Version 3.0.0 of postcss-scss seems to break things.

I would highly appreciate you putting up some guide on how to implement Tailwind with Angular. There's a bunch of tutorials on the web - half of them outdated/wrong.

Keep up the great work!

[adamwathan]

Glad you got it sorted out! I'd love to put together a guide on integrating Tailwind with Angular but have never actually used Angular so don't know where to start. If anyone wants to share an example repo that they think is the best possible setup (given how Angular doesn't allow you to customize the PostCSS config if I'm not mistaken), I'd love to use it as a starting point to come up with something we can endorse.

[nartc]

@adamwathan https://medium.com/@jacobneterer/angular-and-tailwindcss-2388fb6e0bab this is one of the most up-to-date article about tailwind + angular.

[paranerd]

@nartc And even that one is outdated and wrong. For example the postcss-loader does not have an "options" parameter, it's "postcssOptions". And that's just one.
@adamwathan I'd be happy to support you in setting up the guide!

[yevgeniy-belov]

"I'd be happy to support you in setting up the guide!"

@paranerd, it would be great!

[yevgeniy-belov]

By the way, it seems that instead of:
plugins: () => [ require('postcss-import'), require('tailwindcss'), ],

it should be:
plugins: [ require('postcss-import'), require('tailwindcss'), ],

[paranerd]

@cssberries How would you like me to set up the guide?

[yevgeniy-belov]

@paranerd I think it could be similar to what was mentioned above but up to date and right.

[simonswiss]

Hey - moving this to GitHub discussions to keep the conversation going 👍

[paranerd]

I put up an article on my blog describing how to set things up 🙂

[paranerd]

Sure: Setting everything up without purgecss resulted in a styles.css (ng build --prod) of around 2.2MB. With purgecss this came down to 14.7kB. I'd be happy to get working suggestions on simplifying my workflow 😃

[Roguyt]

If you don't run your production build with NODE_ENV set to production the purge will be skipped.
The only issue I have with this method however is tailwindcss is purging tags that are in scss files.

[yevgeniy-belov]

@paranerd, there are two issues I bumped in to: the first one is the snippet for angular.json changes didn't work so I changed it manually. The second issue is that changes in the tailwind.config.js file have no effect. In fact, I don't think it's producing any output.

[Roguyt]

Nevermind, it is working properly the @apply aren't included in the final bundle because they don't have to.
I'm out of battery but I'll put a working repository later today if you want to have a look @paranerd

[yevgeniy-belov]

ok, it works now!

[brandonpittman]

I find using the Tailwind CLI to be easier with Angular.

[oschebesta]

I have used this one for a couple of times now.

https://github.com/ngneat/tailwind

[paranerd]

Looks like something got updated here. I tried ngneat when I raised this issue and it didn't work at the time. But I'm happy to confirm that it did actually work just now 👍
Thanks for re-directing me to it 😃

[tarangrathod]

I was using ng-tailwind css and tried to remove it and all its configuration and install ngneat/tailwind which i did but when i run ng serve I get this error

I tried with fresh install with angular and ngneat/tailwind which works all fine i think there is some migration issue can you help