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.