Vamos a crear una aplicación en Angular en conjunto con Tailwind, ya que es sencillo, sin embargo no es algo obvio y mucho menos en angular. # ¿Qué es Angular? Angular es uno de los frameworks de Javascript más poderosos y populares de la actualidad, desarollado y mantenido por Google. Es sumamente interesante la capacidad que tiene Angular para extender sus posibilidades y entre estas es añadir nuevas librerías, como es el caso de Tailwind. Para más información revisa [la documentación oficial](https://angular.io/docs) # ¿Qué es Tailwind? Tailwind también es un framework conocido, sin embargo es para CSS (no para Javascript como el caso de Angular) que nos permite desarrollar interfaces gráficas estandarizadamente a través de clases comunes en toda la aplicación. Tailwind ha conseguido mucha popularidad últimamente y es porque verdaderamente agiliza el desarrollo de interfaces gráficas, al mismo tiempo que es muy personalizable. # Manos a la obra ## Creación del proyecto de Angular 10 - Crear un nuevo proyecto de Angular, en este caso el nombre que le daré es `tailwind-ejemplo`. Si hay problemas con esto puedes seguir el tutorial oficial en la [documentación oficial](https://angular.io/guide/setup-local) ``` ng new tailwind-ejemplo ``` ![Screen Shot 2020-10-24 at 13.13.20](https://dev-to-uploads.s3.amazonaws.com/i/pz8f9k8e3khg8qwy7htk.png) - En caso de que se pregunte por cual formato usar para css, escogeremos `SCSS` ![Screen Shot 2020-10-24 at 13.16.03](https://dev-to-uploads.s3.amazonaws.com/i/5boos0uqmokky16femjn.png) - Y al final ingresamos al proyecto ``` cd tailwind-ejemplo ``` ![Screen Shot 2020-10-24 at 13.16.58](https://dev-to-uploads.s3.amazonaws.com/i/qvf0rqv9mzkaxncvkcnh.png) ## Instalación de los paquetes necesarios Para utilizar Tailwind junto a Angular es necesario instalar un conjunto de paquetes de npm que lo permitan, estos son: - `tailwindcss` - `postcss-scss` - `postcss-import` - `postcss-loader` - `@angular-builders/custom-webpack` Y para esto ejecutamos el siguiente comando ``` npm i -D tailwindcss postcss-scss postcss-import postcss-loader@~3.0.0 @angular-builders/custom-webpack ``` Es importante asegurarnos que los paquetes en el archivo `package.json` queden con estas versiones (con unas más recientes suelen dar problemas) ``` "@angular-builders/custom-webpack": "^10.0.1", "postcss-import": "^12.0.1", "postcss-loader": "~3.0.0", "postcss-scss": "^3.0.2", "tailwindcss": "^1.8.10", ``` En caso que sean diferentes, es mejor cambiarlas a estas y ejecutar `npm install` y así asegurarnos que van a funcionar como se espera. ## Configurar Tailwind - Iniciamos el tailwind en el proyecto, usando el siguiente comando para crear el archivo de configuración ``` npx tailwind init --full ``` El parametro `--full` es opción, pero esto coloca la configuración con todos los valores por defecto, esto hace más sencillo su configuración. - Añadimos Tailwind al css del proyecto. En el archivo `styles.scss` añadimos las siguientes lineas ``` @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; ``` ## Configurar Webpack - Creamos el archivo `webpack.config.js` con el siguiente comando ``` touch webpack.config.js ``` Y le ponemos 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"), ], }, }, ], }, }; ``` - Actualizar el archivo `angular.json` para utilizar el archivo de webpack que creamos en `build` y `serve` sustituimos el builder por `@angular-builders/custom-webpack:browser` y en `options` añadimos ``` "customWebpackConfig": { "path": "./webpack.config.js" } ``` Entonces sería algo así ``` { ... "projects": { ... "architect": { "build": { "builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig": { "path": "./webpack.config.js" }, ... }, ... }, "serve": { "builder": "@angular-builders/custom-webpack:dev-server", "options": { "customWebpackConfig": { "path": "./webpack.config.js" }, ... }, ... }, ... } } }, } ``` ## Usar Tailwind!🎉🎉 - Colocamos el siguiente código en el archivo `src/app/app.component.html` ```

An advanced online playground for Tailwind CSS, including support for things like:

Customizing your tailwind.config.js file
Extracting classes with @apply
Code completion with instant preview

Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online.

Want to dig deeper into Tailwind?

Read the docs →

``` - Iniciamos la aplicación con el siguiente comando ``` ng serve -o ``` Y deberíamos ver nuestra aplicación funcionando y utilizando Tailwind!! ![Screen Shot 2020-10-24 at 14.03.01](https://dev-to-uploads.s3.amazonaws.com/i/srgovb8p2c2gpoqmlrva.png) Para aprender más de Tailwind visita la [documentación oficial](https://tailwindcss.com/) ### Repositorio con un ejemplo [angular10-tailwindcss](https://github.com/adrian-ub/angular10-tailwindcss) Muchas gracias por seguir este post!

irojasaglr

Crear una aplicación con Angular 10 y Tailwind

Join Our Newsletter. No Spam, Only the good stuff.