DEV Community

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

Collapse
thieugiatri4492 profile image
thieugiatri4492

I have this problem when i try to start the app with ng serve. Can you please help me? :
Alt text of image

Collapse
seankerwin profile image
Sean Kerwin Author

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.

Collapse
thieugiatri4492 profile image
thieugiatri4492

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

Thread Thread
seankerwin profile image
Sean Kerwin Author

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

Thread Thread
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!