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