¿Cómo configurar Tailwind para un nuevo proyecto Angular?

Question

Quiero crear un nuevo proyecto Angular usando Tailwind CSS. Mi versión actual de CLI es 10.1.1. Cosas que he hecho hasta ahora:

• Crea una nueva aplicación usando ng new my-app
• Usar enrutamiento angular => sí
• Utilice SCSS como hoja de estilo
• En el directorio raíz del proyecto ejecutar npm i tailwindcss postcss-import postcss-loader postcss-scss @angular-builders/custom-webpack -D
• En la carpeta src hay un archivo styles.scss , modifíquelo para

.

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

• En el directorio raíz del proyecto ejecutar npx tailwind init
• En el directorio raíz del proyecto crea un nuevo archivo webpack.config.js con el siguiente contenido

.

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

• En el directorio raíz hay un archivo Angular.json
  • Busque los proyectos clave => my-app => architect => build
    • Cambie el constructor a "builder": "@angular-builders/custom-webpack:browser",
    • Agregar a las opciones

.

"customWebpackConfig": {
    "path": "./webpack.config.js"
},

• Busque los proyectos clave => mi-aplicación => arquitecto => servir
  • Cambie el constructor a "builder": "@angular-builders/custom-webpack:dev-server",
  • Agregar a las opciones

.

"customWebpackConfig": {
    "path": "./webpack.config.js"
},

• Ejecute la aplicación ng servedesde el directorio raíz de la aplicación.

Estoy recibiendo este error

ERROR en ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader /src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/ postcss-loader / dist / cjs.js ?? postcss! ./ src / styles.scss) Falló la compilación del módulo (de ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Objeto de opciones no válido. PostCSS Loader se ha inicializado utilizando un objeto de opciones que no coincide con el esquema de API.

• options tiene una propiedad desconocida 'plugins'. Estas propiedades son válidas: objeto {postcssOptions ?, ejecutar ?, sourceMap? } en validar (/.../my-app/node_modules/schema-utils/dist/validate.js:98:11) en Object.loader (/.../my-app/node_modules/postcss-loader/dist /index.js:43:28)

ERROR en la compilación del módulo falló (de ./node_modules/postcss-loader/dist/cjs.js): ValidationError: objeto de opciones no válido. PostCSS Loader se ha inicializado utilizando un objeto de opciones que no coincide con el esquema de API.

• mismo texto que el anterior

¿Cómo puedo configurar Tailwind correctamente?

Answer 1

Las importaciones son 'tailwindcss', no 'tailwind':

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

Answer 2

He encontrado la respuesta después de golpearme la cabeza en todas partes hoy, cambie su webpack.config.js a,

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

Hay un pequeño cambio, los complementos ahora toman matriz en lugar de función. Gracias de antemano 😉.

---

Si alguien todavía tiene problemas, consulte este blog que escribí en Angular 10 + Tailwind CSS 👇

https://fullyunderstood.com/get-started-with-angular-tailwind-css/

Answer 3

Logré que Angular 10 + Angular Material funcionara con Tailwind CSS usando la configuración resaltada en esta diferencia - Soporte de Tailwind CSS en Angular 10, con Angular Material .

Algunos puntos clave además de lo que ya se ha destacado en la pregunta / respuestas:

• Necesita instalar explícitamente postcss (8.x). De alguna manera, los tirones predeterminados (7.x) causan Error: true is not a PostCSS plugin.
• La configuración en webpack.config.js depende de la versión 4.x de postcss-loader.
• Si está utilizando Angular Material, obtendrá Error: Failed to find '~@angular/material/theming'. Para resolver esto, limito los archivos scss que serán procesados ​​por postcss separando el archivo scss (es decir, test: /tailwind\.scss$/en webpack.config.js).

Hasta ahora, parece que está funcionando. 🤞