자바스크립트 - Angular 11에서 Tailwindcss 2 스타일이 작동하지 않습니다

저는 새로운 Angular 11 프로젝트에서 Tailwindcss를 사용해 보고 있습니다. 다음과 같은 개발 패키지를 설치했습니다.

NOTE: Removed other packages for simplicity
"@angular-builders/custom-webpack": "^10.0.1",
"@angular-devkit/build-angular": "~0.1100.2",
"@angular/cli": "~11.0.2",
"@angular/compiler-cli": "~11.0.1",
"autoprefixer": "^10.0.2",
"postcss-import": "^13.0.0",
"postcss-loader": "^4.1.0",
"postcss-scss": "^3.0.4",
"tailwindcss": "^2.0.1",

webpack.config.js

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

스타일.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

angular.json

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

나는 이 코드를 app.component.html에 추가했지만 스타일을 인식하지 못하는 것 같습니다.

...... some codes not included
<div class="px-6 pb-4 space-x-2">
    <a href="https://angular.io" target="_blank" rel="noreferrer"
      class="inline-block bg-red-500 rounded-full px-3 py-1 text-sm font-semibold text-white hover:bg-red-700">
      #angular
    </a>
    <a href="https://tailwindcss.com" target="_blank" rel="noreferrer"
      class="inline-block bg-indigo-500 rounded-full px-3 py-1 text-sm font-semibold text-white hover:bg-indigo-700">
      #tailwind
    </a>
    <a href="https://notiz.dev" target="_blank" rel="noreferrer"
      class="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 hover:bg-blue-400">
      #notiz
    </a>
  </div>

답변 #1

베타 버전 @angular-builders/custom-webpack으로 업데이트할 수 있습니다. angular.json의 customWebpackConfig 섹션이 이제 다음과 같이 변경되어야 합니다

 "customWebpackConfig": {
      "path": "./webpack.config.js",
      "mergeRules": {
           "module": {
              "rules": "append"
            }
      }
  }

당신의 로더들은 webpack.config.js와 같아야 합니다

let sass;
try {
  sass= require('node-sass');
} catch {
  sass= require('sass');
}

module.exports = {
  node: {
    fs: 'empty'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                ident: 'postcss',
                syntax: 'postcss-scss',
                plugins: [
                  "postcss-import",
                  "tailwindcss",
                  "autoprefixer"
                ]
              }
            }
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: sass,
              sourceMap: false,
              sassOptions: {
                precision: 8
              }
            }
          }
        ]
      }
    ]
  }
};

angular-builders에서 이것에 대해 더 읽을 수 있습니다

또한 당신이 필요로 할 패키지들

"postcss": "^8.2.1"
"postcss-import": "^14.0.0"
"postcss-loader": "^4.1.0"
"postcss-scss": "^3.0.4"
"tailwindcss": "^2.0.2"
"autoprefixer": "^10.1.0"
"@angular-builders/custom-webpack": "^11.0.0-beta.4"

답변 #2

ngneat/tailwind는 Angular v11.2.0 이상에서는 작동하지 않습니다. Webpack이 tailwind를 로드하지 않기 때문에 스타일이 적용되지 않습니다. 이것 때문에 우리 팀이 총 12시간 이상을 허비했습니다. npm에서 Angular 버전이 "~11.2.0"으로 설정되어 있었고, 팀원 중 한 명의 로컬 캐시가 "11.1.x" 버전이었기 때문에 npm은 낮은 버전을 선택했고, ngneat 기반 설정은 작동하여 ngneat이 11.2.0에서도 작동한다는 잘못된 인상을 주었습니다. 문제는 우리의 설정에 있는 것이 아니라는 것처럼 보인 것입니다.

이 고난을 겪은 후, '실제 설치된 패키지 버전 확인'이라는 생각이 강화되었다.

npm install -D tailwindcss로 설치하세요

TailwindCSS 플러그인 설치(선택 사항):

npm i @tailwindcss/typography

npm i @tailwindcss/forms

일부 사람들은 CLI 또는 @angular-devkit/build-angular의 이전 버전을 사용하고 있습니다. package.json이 최소 버전 11.2.0 이상이거나 더 최신 버전(가능한 경우)인지 확인하세요.

워크스페이스나 프로젝트 루트에 TailwindCSS 설정 파일을 만드세요. 그 설정 파일의 이름은 tailwind.config.js로 하세요. 다음과 같이 생겼어야 합니다:

module.exports = {
    prefix: '',
    purge: {
      content: [
        './src/**/*.{html,ts}',
      ]
    },
    darkMode: 'class', // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography')],
};

당신의 styles.scss 파일에 다음 TailwindCSS 가져오기를 추가하세요

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

만약 SCSS[.scss] 대신 CSS[.css]를 사용하고 있다면, 파일은 다음과 같이 보여야 합니다:

@tailwind base;
@tailwind components;
@tailwind utilities;

나는 여기 이 사람이 쓴 놀라운 글에서 이것을 가져왔습니다:

https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l