Deprecation?

[tehpsalmist]

So, apparently with the advent of Angular 8, you can now extend the webpack configuration and get tailwind to work seamlessly with Angular, including using tailwind directives in component files.

It's possible that there may yet be uses for this package, so I'll happily update it if the need arises, but it also sounds like it has served its purpose and has now outlived its usefulness. Big thanks to the Angular team for making a great cli tool and continually rolling out developer-friendly updates! :)

For a guide on how to do Angular + Tailwind "the right way," check out this blog post.

[samwilliscreative]

I am on angular 9 and originally follow that article. Unfortunately I couldn't get it working and ended up using this package which was pretty painless.

[tehpsalmist]

Well that's a shame, because I was able to get it working on Angular 9, but I can see how it is very consistent with Angular's high barrier to entry when it comes to modifying the build or using anything beyond ng new or ng generate.

[Dozorengel]

I just tried to get it working, it was really painful for me, couldn't make custom imports work and serving the app is way slower, so got back to this package.

[nartc]

This is a better (up-to-date) article that works pretty well for me. https://medium.com/@jacobneterer/angular-and-tailwindcss-2388fb6e0bab

[Dozorengel]

@nartc thanks, I have finally managed to make it work, now I'm able to use all the tailwind benefits, that's awesome

[nartc]

@Dozorengel No prob! I modified my tailwindcss schematics based on that one. Been working really well for both Angular and Nx projects.

[TomzBench]

@nartc

This artical worked for me but I had to modify my webpack.config slightly here:

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

(source: https://stackoverflow.com/questions/63858991/how-to-setup-tailwind-for-a-new-angular-project)

[nartc]

@TomzBench That is due to the change in latest postcss-loader. I already notified Jacob (the article’s author) about the change. Hopefully he finds sometimes to get the article updated so people won’t get confused.

[MatthewLHolden]

I've followed that exact article and keep getting error after error. Has anyone experienced that at all?

ERROR in Cannot read property 'flags' of undefined

ERROR in ./src/styles.scss (./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: Object.entries(...).flatMap is not a function
    at flattenColorPalette (mypath/node_modules/tailwindcss/lib/util/flattenColorPalette.js:8:83)
    at mypath/node_modules/tailwindcss/lib/plugins/divideColor.js:27:53
    at plugins.forEach.plugin (mypath/node_modules/tailwindcss/lib/util/processPlugins.js:69:5)
    at Array.forEach (<anonymous>)
    at _default (mypath/node_modules/tailwindcss/lib/util/processPlugins.js:63:11)
    at mypath/node_modules/tailwindcss/lib/processTailwindFeatures.js:64:54
    at LazyResult.runOnRoot (mypath/node_modules/postcss/lib/lazy-result.js:303:16)
    at LazyResult.runAsync (mypath/node_modules/postcss/lib/lazy-result.js:355:26)

[tehpsalmist]

what node version were you using?

[MatthewLHolden]

I'm on version 14.15.1.

I've tried the articles above and got it working, but the build times are insanely slow. It's making the development process quite tedious. I'm wondering if it's changing from this builder": "@angular-devkit/build-angular:browser", to webpack.

[tehpsalmist]

Posting here for posterity, since this is a tool used most often in angular apps:

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat -D

Angular is still using postcss 7, so this is the workaround that tailwind supports until postcss 8+ is in use in your project.

[Cephyric-gh]

Angular 11.0.5 updates the CLI to internally use PostCSS 8 now, so shouldn't need the compat. Personally I haven't been able to quite make the switch away from this package since Angular 8, there has always been something that got in the way of it working. I was finally able to make the switch by using @ngneat/tailwind (an upgrade schematic), which seems to inject the tailwind build process directly into the underlying base webpack from Angular as it needs to. This allowed all the normal build parts (parsing scss, sass, less, etc) to continue to be done via Angular, and only parse the tailwind part as it needed to.

Might be the straw to break the deprecation camel's back?

[tehpsalmist]

Good to know @tomhughes-invento ! Thanks for dropping the knowledge on us.