How to setup tailwind with Angular custom web component

Question

My objective is to setup Tailwind CSS with an Angular custom web component project. Because of the custom web component, I'm using ngx-build-plus:browser to serve and build (because this can help bundle everything into a single bundle).

I have then followed this guide for implementing Tailwind, but when I try to serve the application I get the following error:

ERROR in Module build failed (from <path-to-project>/node_modules/postcss-loader/src/index.js):
Error: Failed to find '~projects/<web-component-project>/src/styles.scss'
  in [
    <path-to-project>/projects/<web-component-project>/src/app
  ]
    at <path-to-project>/node_modules/postcss-import/lib/resolve-id.js:35:13

tailwind.config.js

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

webpack.config.js

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

serve-command

ng s --project <project-name> --single-bundle --extra-webpack-config webpack.config.js

tsconfig.base.json

{
    "compileOnSave": false,
    "compilerOptions": {
        "importHelpers": true,
        "module": "esnext",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "downlevelIteration": true,
        "baseUrl": "./",
        "typeRoots": ["node_modules/@types"],
        "lib": ["es2019", "dom", "esnext.asynciterable"],
        "types": ["node", "jest"]
    },
    "exclude": ["cypress", "aveiro-server", "eddyhelp"]
}

projects//tsconfig.app.json

{
    "extends": "../../tsconfig.base.json",
    "compilerOptions": {
        "outDir": "../../out-tsc/app",
        "module": "es2015",
        "target": "es2015",
        "types": []
    },
    "files": ["src/main.ts", "src/polyfills.ts"],
    "include": ["src/**/*.d.ts"]
}

What is going on - why is the postcss-loader trying to look inside app directory - and not <path-to-project>/projects/<web-component-project>/src/app where my styles.scss lives?

Answer 1

I tried to regenerate this issue but did not get any success. My project runs without any error. here is the repo of the project tailwindcss-in-angular. I followed the following steps.

1. create a new angular project.

   ng new tailwindcss-in-angular --create-application=false
   

2. generate new application in the project.

   ng generate application web-component-project
   

3. add ngx-build-plus library to the project. (we need to add it to the newly generated application using the --project option)

   ng add ngx-build-plus --project getting-started
   

4. create a webpack.partial.js file at the root of your project (i.e. where you have your angular.json file is)

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

5. install the dependecy packages.

    npm i autoprefixer postcss-import postcss-loader postcss-scss tailwindcss
   

6. generate tailwind.config.js file.

    npx tailwindcss init
   

7. import tailwind in your styles.scss file.

    /* You can add global styles to this file, and also import other style files */
    @import "tailwindcss/base";
   
    @import "tailwindcss/components";
   
    @import "tailwindcss/utilities";
   

8. remove everything from app.component.html and update it with the following markup.

    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Button
    </button>
   

9. run the project.

    ng serve --project web-component-project -o --extra-webpack-config webpack.partial.js
   

So, why are you getting the error? I googled your error and found these interesting links you can check Or you can use my boilerplat project directly

https://github.com/angular/angular-cli/issues/12981

https://github.com/vuejs-templates/webpack/issues/1066

this link says your project might be in the C drive you can move it in some other drive. ng serve won't compile

I don't know what's going in your project and what is causing the error but I am pretty sure it has nothing to do with tailwindcss its the postcss-import which is causing the issue.

Answer 2

After a lot of digging, I have found the solution to the challenge. It was a 2 part issue:

Inavlid scss imports

First off, the error message Error: Failed to find... originated because the Angular project had multiple component .scss files importing like this: @import '~projects/eddy-library/src/styles.scss';, and was not related directly to using tailwind at all. My solution to this issue was to remove the imports.

Issues with Tailwind and shadow DOM

Second, and maybe more important, was the fact that my web component was using shadow dom, and therefore following the guides of setting up Tailwind did not work. Something I found a discussion about here. The only solution seems to be abandoning the shadow DOM, something actually ok in my specific use-case, but I wonder what other web components will do in this case.

I hope this answer can help other people with the same troubles. Big thanks to everyone who tried to help out.

Answer 3

I think this might be a path issue. Instead of passing the extra-webpack-config in --extra-webpack-config webpack.config.js, can you place it in the angular.json file?

{
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
           "path": "webpack-dev.config.js"
        }
      }   
    }
  }
}

This schematic was released yesterday, and encapsulates a lot of the ideas and techniques for integrating TailwindCSS with Angular:

https://github.com/nartc/tailwindcss-schematics#readme