DEV Community

Discussion on: Angular 8 + Tailwind CSS Guide (Updated for Angular 9 + 10)

thieugiatri4492 profile image
thieugiatri4492 • Edited

Now i face the problem with custom webpack builder, did you have occured this problem with angular 10?
Alt text of image
Alt text of image

Thread Thread
seankerwin profile image
Sean Kerwin Author

I have moved to use the schematic garygrossgarten/ngx-tailwind which i dont use a custom-webpack anymore, my angular.json looks like this

"architect": {
        "build": {
          "builder": "ngx-build-plus:browser",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [],
            "extraWebpackConfig": "./webpack.config.js"
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "ngx-build-plus:dev-server",
          "options": {
            "browserTarget": "my-app:build",
            "extraWebpackConfig": "./webpack.config.js"
          },
          "configurations": {
            "production": {
              "browserTarget": "my-app:build:production"
            }
          }
        },

I suggest you try installing the schematic and go from there!

Thread Thread
thieugiatri4492 profile image
thieugiatri4492

So, do i have to remove the custom webpack ? Or just install the schematic garygrossgarten/ngx-tailwind directly on my project?

Thread Thread
seankerwin profile image
Sean Kerwin Author

You can try just installing the schematic. I’ve never tried undoing my own work in favour of the schematic.

If you do install it. All you should need to do is update the angular.Json to match mine

Thread Thread
thieugiatri4492 profile image
thieugiatri4492

Thank you, i have successfully run with tailwind thank to your guide. But in your post, you have to warn people who already create webpack.config.js, remove it before install schematic because it will throw error that webpack.config.js already exist

Thread Thread
seankerwin profile image
Sean Kerwin Author

Glad you got it to work!