Discussion on: Angular 8/9/10 + Tailwind CSS Guide

View post

Replies for: I have this problem when i try to start the app with ng serve. Can you please help me? :

By any chance are you using Angular 10.x?

I think i have encountered the same issue when making a new application using angular 10, I didn't spend much time looking into fixing it. I was just playing with something...

I will update here once I have a working example and how i did it for Angular 10.

thieugiatri4492 • Oct 4 '20

Yes, im using angular 10. I occured this problem , i think i have to revert to angular 9

Sean Kerwin • Oct 4 '20

Read the update to my guide. I changed it to work with Angular10

thieugiatri4492 • Oct 7 '20 • Edited

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

Sean Kerwin • Oct 7 '20

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!

thieugiatri4492 • Oct 7 '20

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

Sean Kerwin • Oct 7 '20

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

thieugiatri4492 • Oct 8 '20

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

Sean Kerwin • Oct 8 '20

Glad you got it to work!