javascript - Styl Tailwindcss 2 nie działa w Angular 11

Próbuję użyć Tailwindcss w nowym projekcie Angular 11. Mam zainstalowane następujące pakiety deweloperskie.

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')
            ]
          }
        }
      }
    ]
  }
}

style.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" }

Dodałem ten kod do app.component.html, ale wydaje się, że nie rozpoznaje stylów.

...... 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>

Odpowiedź #1

Możesz zaktualizować do wersji beta @angular-builders/custom-webpack. Ma nowe zmiany w twoim angular.json, sekcja customWebpackConfig powinna teraz wyglądać tak

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

Twój plik webpack.config.js powinien wyglądać tak jak twoje loadery

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
              }
            }
          }
        ]
      }
    ]
  }
};

Możesz przeczytać więcej na ten temat na angular-builders

również pakiety, których będziesz potrzebować

• "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"

Odpowiedź #2

Rozwiązanie ngneat/tailwind nie działa dla Angulara w wersji 11.2.0 i wyższych. Webpack nie załaduje tailwind, a więc style nie zostaną zastosowane. W pewnym sensie to cumulatywnie zmarnowało ponad 12 godzin naszego zespołu, ponieważ w npm wersja Angulara była ustawiona na "~11.2.0", a jeden z członków zespołu miał lokalny cache dla "11.1.x", w związku z czym npm wybrał niższą wersję, a konfiguracja oparta na ngneat działała, dając fałszywe wrażenie, że ngneat działa dla 11.2.0, a problem tkwi w naszym własnym ustawieniu.

Po tym doświadczeniu idea potwierdzenia „rzeczywistej zainstalowanej wersji pakietu” została wzmocniona.

Zainstaluj za pomocą npm install -D tailwindcss

Zainstaluj wtyczki TailwindCSS (opcjonalnie):

npm i @tailwindcss/typography

npm i @tailwindcss/forms

Niektórzy używają starszych wersji CLI lub @angular-devkit/build-angular. Upewnij się, że twój plik package.json ma PRZYNAJMNIEJ wersję 11.2.0 lub nowszą (jeśli jest dostępna)

Utwórz plik konfiguracyjny TailwindCSS w katalogu roboczym lub w katalogu głównym projektu. Nazwij ten plik konfiguracyjny tailwind.config.js. Powinien wyglądać tak:

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')],
};

W swoim pliku styles.scss dodaj następujące importy TailwindCSS

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

Jeśli używasz CSS[.css] zamiast SCSS[.scss], Twój plik powinien wyglądać tak:

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

Wziąłem to z niesamowitego dzieła tej osoby tutaj:

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