Usando TailwindCSS con Angular

En este artículo vamos a explicar cómo configurar una aplicación Angular con Angular CLI para poder integrar TailwindCSS. Con esta integración el CSS que tengamos que escribir en los componentes va a ser mínimo pues la mayoría de estilos definidos usarán clases Tailwind.

Angular CLI

Angular CLI es la interfaz de línea de comandos recomendada para generar aplicaciones Angular. Por debajo utiliza webpack, pero no tenemos acceso directamente a la configuración utilizada, por lo que si queremos añadir/modificar algún comportamiento podemos hacer uso de un paquete llamado @angular-builders/custom-webpack, el cual nos permitirá extender la configuración de webpack.

Configurando TailwindCSS

TailwindCSS va a funcionar independientemente del preprocesador que estemos utilizando en nuestra aplicación (si es que usamos alguno). Por comodidad, configuraremos PurgeCSS para eliminar todas las clases que no estemos utilizando solo para el entorno de producción y no en desarrollo, donde estarán todas las clases disponibles. Vamos a ver paso por paso como añadir Tailwind.

El primer paso será instalar las dependencias:

npm install tailwindcss --save
npm install --save-dev @angular-builders/custom-webpack @fullhuman/postcss-purgecss

Generamos un fichero de configuración de Tailwind vacío:

npx tailwind init

Creamos un nuevo fichero, con la extensión en función del preprocesador que estemos utilizando. En mi caso scss, por lo que el fichero será src/tailwind.scss e insertamos las directivas de Tailwind. En caso de querer generar clases CSS este será el fichero donde añadirlas.

@tailwind base;
@tailwind components;

/* Custom CSS */
a.tag {
    @apply bg-gray-200 rounded-full px-3 py-1 font-semibold text-gray-700;
}
a.tag:hover {
    @apply underline;
}
/* Custom CSS end */

@tailwind utilities;

A continuación crearemos un fichero extra-webpack.config.js en la raíz del proyecto con el siguiente contenido:

const purgecss = require('@fullhuman/postcss-purgecss')({
  // Specify the paths to all of the template files in your project
  content: ['./src/**/*.html', './src/**/*.component.ts'],
  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
});

module.exports = (config, options) => {
  console.log(`Using '${config.mode}' mode`);
  config.module.rules.push({
    test: /tailwind\.scss$/,
    use: [
      {
        loader: 'postcss-loader',
        options: {
          plugins: [
            require('tailwindcss')('./tailwind.config.js'),
            require('autoprefixer'),
            ...(config.mode === 'production' ? [purgecss] : [])
          ]
        }
      }
    ]
  });
  return config;
};

angular.json

Ahora necesitamos editar el fichero de configuración angular.json para poder personalizar los comandos ng serve y ng build. Iremos a la clave projects.architect.build.builder y reemplazaremos @angular-devkit/build-angular:browser por @angular-builders/custom-webpack:browser. Y en la ruta architect.build.options, añadiremos un objeto customWebpackConfig que tendrá en una clave path el valor extra-webpack.config.js.

Haremos los mismos cambios en projects.architect.serve.builder reemplazando @angular-devkit/build-angular:dev-server por @angular-builders/custom-webpack:dev-server, y en la ruta architect.serve.options añadiremos nuevamente un objeto customWebpackConfig que tendrá en una clave path el valor extra-webpack.config.js.

Por último añadiremos nuestra hoja de estilos src/tailwind.scss al array en la ruta architect.build.options.styles. Veamos todos los cambios juntos:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {           
        "path": "extra-webpack.config.js"
      },                                 
      // ...
      "styles": [
        "src/tailwind.scss",             
        "src/styles.css"
      ],
    // ...
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "customWebpackConfig": {           
        "path": "extra-webpack.config.js"
      },                                 
    // ...
    }
  }
}

Una vez aplicados estos cambios podremos desarrollar ejecutando ng serve, se lanzará nuestra aplicación en modo desarrollo donde dispondremos de todas las clases de Tailwind, lo que nos permitirá ser más ágiles. Al compilar para producción con ng build --prod podremos ver que se generarán solo las clases que hemos utilizado en la carpeta dist.

chunk {4} styles.847663bf210845648553.css (styles) 5.51 kB [initial] [rendered]

PurgeCSS integrado en Tailwind

Desde la versión 1.4.0 Tailwind integra la opción de utilizar PurgeCSS directamente desde la propia configuración de Tailwind. De esta manera el proceso puede simplificarse un poco, podríamos eliminar la dependencia @fullhuman/postcss-purgecss de nuestro proyecto y dejar el fichero extra-webpack.config.js con el siguiente contenido:

module.exports = (config, options) => {
  console.log(`Using '${config.mode}' mode`);
  config.module.rules.push({
    test: /tailwind\.scss$/,
    use: [
      {
        loader: 'postcss-loader',
        options: {
          plugins: [
            require('tailwindcss')('./tailwind.config.js')
          ]
        }
      }
    ]
  });
  return config;
};

Y pasaremos las rutas al fichero tailwind.config.js:

module.exports = {
  purge: ['./src/**/*.html', './src/**/*.component.ts'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Para que puedan eliminarse las clases que no utiliza nuestro proyecto, debemos compilar con la variable de entorno NODE_ENV con valor production. Para poder dar valor a esta variable y que funcione de manera multiplataforma me gusta utilizar el paquete cross-env. Podemos instalarlo en nuestro proyecto:

npm install cross-env --save-dev

Y posteriormente podemos crear un script en el package.json para lanzar el build:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{
  // ...
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:prod": "cross-env NODE_ENV=production ng build --prod"
  },
  // ...
}

Lo ejecutamos para comprobar que todo funciona correctamente:

npm run build:prod

chunk {4} styles.847663bf210845648553.css (styles) 5.51 kB [initial] [rendered]

Con estos sencillos pasos ya estás listo para utilizar Tailwind en tus proyectos Angular.