Specify custom PostCSS plugins

[ghost]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Versions.

@angular/cli: 1.4.9 node: 6.11.4 os: linux x64 @angular/animations: 4.4.6 @angular/common: 4.4.6 @angular/compiler: 4.4.6 @angular/core: 4.4.6 @angular/forms: 4.4.6 @angular/http: 4.4.6 @angular/platform-browser: 4.4.6 @angular/platform-browser-dynamic: 4.4.6 @angular/router: 4.4.6 @angular/cli: 1.4.9 @angular/compiler-cli: 4.4.6 @angular/language-service: 4.4.6 typescript: 2.3.4

Desired functionality.

I would like the ability to specify custom postCss plugins, without having to eject the angular webpack.config.js file.

Mention any other details that might be useful.

This would enable frameworks like TailwindCSS (https://tailwindcss.com) and other useful PostCSS plugins through the CLI without having to deal with the ejected webpack config file.

[tridattran]

Hi, just wondering if there was a workaround for using TailwindCSS via PostCSS in Angular while we wait for this item. I've googled and couldn't find any good documentation on how to. Thanks.

[trimox]

Found a hackable workaround.

As there is no "official" way to provide Angular CLI a postcss-custom-properties config - yet.

Open index.js from your projects node_modules\postcss-custom-properties\dist folder Find this line: warnings: options.warnings === undefined ? true : options.warnings,

We're going to change warnings property from true to false. warnings: options.warnings === undefined ? false : options.warnings,

Save and run ng serve

[felipefialho]

Thanks @trimox!

But change files in node_modules folder is a big problem for me 😢

I am waiting the official solution...

[trimox]

100% agreed. Hope the issue gets more attention!

[kylecordes]

The typical workaround for this sort of thing is to write a NPM postinstall script in your application which uses sed or similar to monkey-patch (via regex) the relevant line of code inside node_modules. This is as awful a hack as it sounds, but I've used it several times to get past the need for a temporary feature "right now" awaiting a real solution down the road.

Overall I think a monkey patch like this is much less bad than ejecting, or rolling your own build solution, to get access to a needed setting.

[NazarkinRoman]

Vote up! This could be very useful option.

[tihomir-kit]

@filipesilva could you please tell us what the "comp: cli/build" tag you just added means? any chance of this feature landing in cli anytime soon-ish? :)

thanks

[byronsanchez]

Just wanted to see if I could get a definite answer- does this mean if I wanted to use a third-party postcss plugin with angular-cli (eg. postcss-media-variables), I have to eject the webpack config? In other words, there's currently no native way to add additional postcss plugins to angular-cli?

Thanks for any help!

[phroggyy]

With Angular CLI 6 no longer allowing for ng eject, this has become much more important. We are currently relying on an ejected webpack config to add Tailwind CSS, but with all the changes from Angular 5 to 6 (not to mention going from Webpack 3 to 4), it would be awesome if there was a way to specify PostCSS plugins in the config. Since we already have autoprefixer, I'd imagine we could perhaps move autoprefixer into a postCSS section of the configuration, keeping it all exposed (but preconfigured) to the user.

[d4nc3r]

Are there any updates about using postcss plugins? We are using cssnext rather than sass, and are relying on postcss-cssnext to do that. We would really like to be able to use Angular CLI - but we aren't able to do any hacking of the node_modules due to constraints of our (overly) constrained build system :/

@filipesilva - it's been almost 4 months since you were unassigned, any idea if someone else will be assigned soon, or should we just give up on CLI for now? I'd have a shot at convincing our team to hang tight if we knew it would be worked on soon-ish...but the natives are becoming restless!!

[jerguslejko]

any updates?

[babeal]

I think that having postcss run the auto prefixer and allowing other plugins is an awesome idea - @phroggyy

@d4nc3r postcss-cssnext is dead, now have to use postcss-preset-env going forward.

[babeal]

So looking at the generation of the webpack config, postcss is run for all scss|less|stylus|css right before the raw-loader with the following plugins -> postcss-url, postcss-import, and autoprefixer, plus another cli specific plugin. I really think most of us are wanting to run plugins right before the autoprefixer, but if a plugin like cssinject needs to run before the url plugin then the ordering would need to be managed. The plugin removeRoot is another one that requires ordering. It also looks like plugin configs need to be substantially modified to be usable in this environment. In addition, plugins like postcss-preset-env, which handles cssnext behavior, also configures autoprefixer driven by browserslist which could conflict with the execution of the autoprefixer in the cli.

https://github.com/angular/devkit/blob/master/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts

[babeal]

I guess one alternative is to fork https://github.com/angular/devkit and add the webpack config lines directly in to that file and just try to keep them up to date... but a supported option would be nice

[hunhavoc]

We patch https://github.com/angular/devkit/blob/master/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts without ejection using patch-package.

[ahnpnl]

hi everyone, are there any promising developments on this ?

[hLittle]

Devkit has been moved to the angular-cli project, new link to styles config is this: https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts

[IStranger]

Hey guys! What about custom builders for Angular 6+? I haven't tried, however package author says it is good alternative for deprecated ng eject and it allows to extend webpack config (without overriding built-in config). See for details: https://github.com/meltedspark/angular-builders/tree/master/packages/custom-webpack

[MickL]

Isnt this the most requested feature since Angular 2?

Personally i need to add flexbugs to PostCSS.

[michaelcm]

Also looking for this feature to add the postcss-momentum-scrolling plugin. I have tried using the custom builders for Angular 7, but haven't had success adding getting it to add a plugin. Instead it seems to replace the entire ruleset for /\.scss$|\.sass$/.

Started a question here to see if anyone knows how and can point me in the right direction. https://stackoverflow.com/questions/53955119/how-do-i-add-an-additional-postcss-plugin-via-the-new-angular-cli-v7-angular-js

[deepthan]

any solution with angular6?

[lake2]

I have the same problem.

[ahmadalfy]

Bumping this, we dropped Sass and other preprocessors for PostCSS for about 3 years.

[jasonraimondi]

It would be really great to be able to add custom PostCSS plugins into an project utilizing the @angular/cli tooling.

[abierbaum]

Here is a great article about how to extend postcss with @angular-builders/custom-webpack I think it will solve the issue for us for now.

https://netbasal.com/customize-webpack-configuration-in-your-angular-application-d09683f6bd22

[unlight]

No, it wont. angular-cli injects own internal postcss plugin to postcss loader. angular-cli -> webpack -> potscss loader -> postcss plugins.

See node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/styles.js

[martin-mueller-solutions]

we had the same issue, since we needed additional loader for loading scss.

We are doing it dirty like this, using @angular-builders/custom-webpack:

module.exports = (config) => {

  // removing old loader
  config.module.rules = Array.from(config.module.rules).filter(e => !`${e.test}`.startsWith('/\\.scss'));

  // Adding proper scss rule with loaders
  config.module.rules.push({
    test: /\.scss$|\.sass$/,
    use: [
      {
        loader: 'postcss-loader',
        options: {
          sourceMap: false,
        }
      },
      {
        loader: 'resolve-url-loader',
        options: {sourceMap: false}
      },
      {
        loader: 'sass-loader',
        options: {sourceMap: false}
      }
    ]
  });

  return config;
};

Would love to get rid of it though

[unlight]

Adding PostCss plugin by Custom webpack builders does not work https://github.com/just-jeb/angular-builders/issues/634 is this valid?

[intellix]

didn't realise I wanted PostCSS Plugins until I saw this: https://github.com/larsenwork/postcss-easing-gradients

[filipesilva]

https://github.com/just-jeb/angular-builders/issues/634 and https://github.com/just-jeb/angular-builders/issues/638 contain information on how this can be achieved using the excellent angular-builders.

This isn't something we're looking at doing as a first party option because exposing PostCSS configuration is very much similar to exposing Webpack configuration, insofar as it requires code configuration and is not guaranteed to be isolated. In webpack, even small configuration changes in one place can require larger edits across other loaders and plugins to work correctly.

I agree it's not easy to do with angular-builders, but it is possible. It would be great to have more composable webpack setup in order to better enable third party modifications.

[ToniaDemchuk]

Simply append or prepend rules didn't work for me. The following custom webpack config worked:

const postcssCustomProperties = require('postcss-custom-properties');

module.exports = (config, options) => {

    const scssRule = config.module.rules.find(x => x.test.toString().includes('scss'));
    const postcssLoader = scssRule.use.find(x => x.loader === 'postcss-loader');
    const pluginFunc = postcssLoader.options.plugins;
    const newPluginFunc = function () {
        var plugs = pluginFunc.apply(this, arguments);
        plugs.splice(plugs.length - 1, 0, postcssCustomProperties({ preserve: true }));
        return plugs;
    }
    postcssLoader.options.plugins = newPluginFunc;

    return config;
};

[unlight]

I've tried this approach and it did not work for me (angular 9.0.0-rc.7). Build hangs (stuck) on Generating ES5 bundles for differential loading... But looks like plugins injected correctly.

[anoopsinghbayes]

@ToniaDemchuk how does your angular.json file looks like do you have a repo that i can refer?

[ToniaDemchuk]

@anoopsinghbayes Unfortunately, no public repo I can share to you. Here is angular.json file:

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "MyProject": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss"
                }
            },
            "architect": {
                "build": {
                    "builder": "@angular-builders/custom-webpack:browser",
                    "options": {
                        "outputPath": "wwwroot",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"                            
                        ],
                        "styles": [
                            "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
                            "src/styles.scss",
                            "src/styles/global-styles.scss",
                            "./node_modules/quill-mention/dist/quill.mention.min.css",
                            "./node_modules/quill/dist/quill.core.css",
                            "./node_modules/quill/dist/quill.snow.css"
                        ],
                        "scripts": [],
                        "customWebpackConfig": {
                            "path": "./custom-webpack.config.js",
                            "replaceDuplicatePlugins": true,
                            "mergeStrategies": {
                                "module.rules": "prepend"
                            }
                        }
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.prod.ts"
                                }
                            ],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "2mb",
                                    "maximumError": "5mb"
                                }
                            ]
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-builders/custom-webpack:dev-server",
                    "options": {
                        "browserTarget": "MyProject:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "MyProject:build:production"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "MyProject:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.spec.json",
                        "karmaConfig": "src/karma.conf.js",
                        "styles": [
                            "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
                            "src/styles.scss"
                        ],
                        "scripts": [],
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ]
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
                            "src/tsconfig.app.json",
                            "src/tsconfig.spec.json"
                        ],
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                }
            }
        }
    },
    "defaultProject": "MyProject"
}

Angular versions from package.json:

"@angular/animations": "8.2.14",
"@angular/cdk": "8.2.3",
"@angular/common": "8.2.14",
"@angular/compiler": "8.2.14",
"@angular/core": "8.2.14",
"@angular/flex-layout": "8.0.0-beta.27",
"@angular/forms": "8.2.14",
"@angular/material": "8.2.3",
"@angular/platform-browser": "8.2.14",
"@angular/platform-browser-dynamic": "8.2.14",
"@angular/router": "8.2.14",
"@angular-builders/custom-webpack": "8.4.1",
"@angular-builders/dev-server": "7.3.1",
"@angular-devkit/build-angular": "0.803.20",
"@angular/cli": "8.3.20",
"@angular/compiler-cli": "8.2.14",
"@angular/language-service": "8.2.14",

[johncrim]

I tried something based on what @ToniaDemchuk did, and wasn't able to get it to work. I did some debugging to make sure the plugin was correctly added to the list of postcss plugins, and I was able to get that to work, but the plugin still isn't doing anything.

I have another project using postcss within "plain"(?) webpack config, and the postcss plugins work fine there.

Here's what I have - it fixes a bug in finding the postcss-loader, and it successfully adds a plugin, but there's no evidence that the plugin is doing anything:

angular.json:

 "projects": {
    "(app name)": {
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
...
            "customWebpackConfig": {
              "path": "ng-webpack-ext.config.js"
            },

ng-webpack-ext.config.js :

const combineMediaQueryPlugin = require('postcss-combine-media-query');

/**
 * Patches the webpack postcss-loader plugins function to add the specified postcss
 * plugins, in addition to angular's defaults.
 *
 * @param {object} webpackConfig - The webpack config, created by angular-devkit
 * @param {array} addPlugins - An array of postcss plugins to insert at the beginning of the postcss plugins
 */
function patchWebpackPostcssPlugins(webpackConfig, addPlugins) {
  const webpackScssRule = webpackConfig.module.rules.find(x => x.test.toString().includes('scss'));
  if (!webpackScssRule) {
    console.warn('[ng-webpack-ext.config.js]: No scss rule found');
  }
  else {
    const postcssLoader = webpackScssRule.use.find(x => x.loader.includes('postcss-loader'));
    const pluginFunc = postcssLoader.options.plugins;
    const newPluginFunc = function () {
      let plugins = pluginFunc.apply(this, arguments);
      plugins = plugins.concat(addPlugins);
      console.dir(plugins); // Shows the plugins
      return plugins;
    }
    postcssLoader.options.plugins = newPluginFunc;
  }
};

/** Function returning webpack config. */
module.exports = (config, options) => {
  patchWebpackPostcssPlugins(config, [combineMediaQueryPlugin()]);

  return config;
};

Looking at the current angular-cli code, it looks like there's an OptimizeCssWebpackPlugin which wraps cssnano and postcss. That runs as a webpack minimizer.

The console.dir line above show that my plugin is included in the array, after the others created by angular's plugin creator:

[
  [Function (anonymous)] {
    postcssPlugin: 'postcss-import',
    postcssVersion: '7.0.27'
  },
  [Function (anonymous)] {
    postcssPlugin: 'postcss-cli-resources',
    postcssVersion: '7.0.27'
  },
  [Function: plugin] {
    options: {},
    browsers: undefined,
    info: [Function (anonymous)],
    postcssPlugin: 'autoprefixer',
    postcssVersion: '7.0.27'
  },
  [Function (anonymous)] {
    postcssPlugin: 'postcss-combine-media-query',
    postcssVersion: '7.0.27'
  }
]

I'm pretty much stuck figuring out why the postcss plugin isn't being used. I've about hit my limit on painful troubleshooting for one day.

[GuerrillaCoder]

Any progress update on this feature? Almost 3 years since it was suggested. I am dropping SASS and going PostCSS. Right now it looks like I will have to switch to React to do that.

[banjankri]

as mentioned above and in this article I had no problem integrating postcss/tailwindcss.

The integration is straightforward and all one has to do is provide the custom build part themselves, no need to get the hands dirtly with Angular Cli internals.

[CodewindOnGithub]

@banjankri getting tailwind to work is not a problem, even with material. But we still face an issue when debugging css in chrome. All imported styles in styles.scss gets inlined. You don't see the actual file in chrome. I would love to add just the plugin instead of override the webpack config

[CodewindOnGithub]

for applying custom post-css plugins I found a solution in this ticket: https://github.com/just-jeb/angular-builders/issues/638

[georgiyordanov]

If anyone needs it, here is a working tailwindcss config for @angular/cli@11.0.5 and @angular-builders/custom-webpack@11.0.0.

extra-webpack.config.js :

module.exports = (config) => {
  const globalStylesPostcssLoaderOptions = config.module.rules
    .find((r) => r.include && r.test && r.test.toString().includes('\\.scss$'))
    .use.find((u) => u.loader && u.loader.includes('postcss-loader')).options;

  const globalStylesPostcssOptionsCreator = globalStylesPostcssLoaderOptions.postcssOptions;

  globalStylesPostcssLoaderOptions.postcssOptions = (loader) => {
    const postcssOptions = globalStylesPostcssOptionsCreator(loader);
    postcssOptions.plugins.splice(postcssOptions.plugins.length - 1, 0, require('tailwindcss'));

    return postcssOptions;
  };

  return config;
};

The important part is to modify only the global styles loader chain as explained here: https://github.com/just-jeb/angular-builders/issues/638#issuecomment-564515958. The global styles loader chain uses an include, while the components' uses an exclude.

EDIT: I changed the config to js as @angular-builders/custom-webpack has an open issue with typescript and karma (https://github.com/just-jeb/angular-builders/issues/749).

[antoinebrault]

If anyone needs it, here is a working tailwindcss config for @angular/cli@11.0.3 and @angular-builders/custom-webpack@11.0.0-beta.1.

extra-webpack.config.ts :

export default (config: any) => {
  const globalStylesPostcssLoaderOptions = config.module.rules
    .find((r: any) => r.include && r.test && r.test.toString().includes('\\.scss$'))
    .use.find((u: any) => u.loader.includes('postcss-loader')).options;

  const globalStylesPostcssOptionsCreator = globalStylesPostcssLoaderOptions.postcssOptions;

  globalStylesPostcssLoaderOptions.postcssOptions = (loader: any) => {
    const postcssOptions = globalStylesPostcssOptionsCreator(loader);
    postcssOptions.plugins.splice(postcssOptions.plugins.length - 1, 0, require('tailwindcss'));

    return postcssOptions;
  };

  return config;
};

The important part is to modify only the global styles loader chain as explained here: just-jeb/angular-builders#638 (comment). The global styles loader chain uses an include, while the components' uses an exclude.

If anyone is wondering why it fails with Tailwind 2... Angular still uses PostCSS 7. see https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

[vltansky]

@antoinebrault @angular/cli@11.0.5 uses PostCSS 8 https://github.com/angular/angular-cli/commit/48c7a85f0ae8ad760c9783ec87f9746741d24828

@georgiyordanov can confirm that your snippet works with @angular/cli@11.0.5 and @angular-builders/custom-webpack@11.0.0

[vltansky]

Maybe can be useful for somebody: helper function to add postcss plugins at specific index or before/after plugin (e.g adding tailwind before autoprefixer) to all angular postcss options (sass, scss, css, stylus, less). You can choose if to add to global and/or component levels files. here is example repo: https://github.com/vltansky/tailwind-ng11

function patchWebpackPostcssPlugins({
  webpackConfig,
  addPlugins = [],
  pluginName = null,
  append = false,
  atIndex = null,
  components = true,
  global = true,
}) {
  const position = append ? 1 : 0;
  webpackConfig.module.rules.map((rule) => {
    if (!(rule.use && rule.use.length > 0) || (!components && rule.exclude) || (!global && rule.include)) {
      return rule;
    }
    rule.use.map((useLoader) => {
      if (!(useLoader.options && useLoader.options.postcssOptions)) {
        return useLoader;
      }
      const postcssOptions = useLoader.options.postcssOptions;
      useLoader.options.postcssOptions = (loader) => {
        const _postcssOptions = postcssOptions(loader);
        const pluginIndex =
          atIndex !== null
            ? atIndex
            : _postcssOptions.plugins.findIndex(
                ({ postcssPlugin }) =>
                  postcssPlugin && pluginName && postcssPlugin.toLowerCase() === pluginName.toLowerCase()
              );
        if (pluginName && pluginIndex === -1) {
          console.warn(`${pluginName} not found in postcss plugins`);
        }
        const insertIndex =
          pluginIndex >= 0
            ? Math.min(Math.max(pluginIndex, 0), _postcssOptions.plugins.length)
            : _postcssOptions.plugins.length;
        _postcssOptions.plugins.splice(insertIndex + position, 0, ...addPlugins);
        return _postcssOptions;
      };
      return useLoader;
    });
    return rule;
  });
}

module.exports = (config) => {
  const isProd = config.mode === "production";
  const tailwindConfig = require("./tailwind.config.js")(isProd);
  patchWebpackPostcssPlugins({
    webpackConfig: config,
    addPlugins: [require("tailwindcss")(tailwindConfig)],
    pluginName: "autoprefixer",
    // global: false,
    // components: false,
    // atIndex: 2,
    // append: false,
  });
  return config;
};

[georgiyordanov]

@antoinebrault @angular/cli@11.0.5 uses PostCSS 8 48c7a85

@georgiyordanov can confirm that your snippet works with @angular/cli@11.0.5 and @angular-builders/custom-webpack@11.0.0

@vltansky As far as I can tell, @angular/cli@11.0.5 still uses PostCSS 7. It looks like PostCSS 8 will be included in @angular/cli@11.1.x.

Yep, the config above also works with @angular/cli@11.0.5 and @angular-builders/custom-webpack@11.0.0. I've updated my comment.

[vltansky]

@georgiyordanov right, looks like although postcss have been updated in @angular/cli/package.json and released,@angular-devkit/build-angular/package.json is updated to postcss 8 but not released https://github.com/angular/angular-cli/commit/94e0d6a8f76b9aa9124d1368a4536f0122beec5a But somehow tailwind build works fine for me. How is that?

[kyliau]

We are currently running a survey about PostCSS. If there are specific plugins that you'd like Angular CLI to support, please let us know. Once the survey is concluded we'll post an update on the results and the next steps here.

[kyliau]

Based on the survey results, 90% of the participants wanted Tailwind CSS, and 37% wanted Purge CSS. The signal was loud and clear, so we have added Tailwind support in #19935, and it'll be released in v11.2 scheduled for Feb 10, 2021.

As for PurgeCSS, supporting it is somewhat tricky due to the risk of breaking applications. After some thorough discussion with the Angular Components team, we think it is best to separate the problem space into first-party code and third-party code. For first-party code, since developers know their own code best, it is better that CLI provide a checker to detect unused CSS, and let developers decide if they want to remove (more importantly, whether it is safe to remove) the CSS themselves. This applies to both component stylesheets and global stylesheets. For third-party code, removing unused CSS is necessary in some libraries that do not provide fine grained stylesheets. However, this can be done post-build, and does not necessarily require integration with CLI. We are working on this, and will publish some guides / examples soon.

We maintain our stance that exposing PostCSS configuration is not a scalable solution in the long term, as explained in https://github.com/angular/angular-cli/issues/8427#issuecomment-576234801. Going forward, while we are not able to support every PostCSS plugin out there, we will continue to review different use cases on an individual basis, and make decision based on developer feedback and the current landscape of web development. Please open a new issue if there's a specific plugin you'd like CLI to support. I'll close this issue for now, thank you all for the feedback!

[matAtGitHub]

Hi All - nice work on landing this!

Quick question: is there a way to disable the automatic detection of Tailwind?

I want to continue using my custom webpack builder configuration for tailwind but also want to be on v11.2

[vltansky]

@mattAtPropertyMe rename your tailwind.config.js to any other name

[matAtGitHub]

Thanks @vltansky confirming your suggestion worked, however unfortunately it breaks VSCode Tailwind IntelliSense.

The good news is, renaming the file to tailwind.js fixes everything, reasoning below.

The Angular CLI only references the file tailwind.config.js and the Tailwind IntelliSense extension looks for both tailwind.config.js and tailwind.js

Thanks again.