DEV Community

Cover image for Cómo usar Tailwind CSS 2 en Angular 11 🎉🎉
Adrián UB
Adrián UB

Posted on • Updated on • Originally published at adrianub.vercel.app

Cómo usar Tailwind CSS 2 en Angular 11 🎉🎉

#angular #tailwindcss

Tailwind CSS es un marco CSS de utilidad que facilita la creación de sistemas de diseño excepcionales. Se basa en la filosofía de que prácticamente cualquier cosa que pueda hacer con CSS, puede lograrlo directamente agregando un montón de clases de utilidad directamente en su HTML. Angular, por otro lado, es una plataforma que le permite crear aplicaciones empresariales de alta calidad. Combine Angular con Tailwind CSS y tendrá una pila perfecta para crear aplicaciones web de primer nivel.

Tailwind es un complemento de PostCSS, pero desafortunadamente, la CLI de Angular, aunque usa PostCSS bajo el capó para algunas operaciones, no es compatible con los complementos de PostCSS a partir de hoy. Entonces, agregar Tailwind a su aplicación Angular no es tan fácil cómo debería ser.

En este artículo, lo guiaré a través de cómo puede eludir esta limitación y agregar Tailwind CSS a su aplicación Angular.

Crear un nuevo proyecto

Versión de angular al crear esta publicación

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 11.0.4
Enter fullscreen mode Exit fullscreen mode

Comando para crear un nuevo proyecto

ng new angular11-tailwindcss --style=scss
Enter fullscreen mode Exit fullscreen mode

Instalar dependencias

Prosigamos instalando las dependencias requeridas a través de npm:

npm i -D tailwindcss autoprefixer postcss postcss-scss postcss-import postcss-loader
Enter fullscreen mode Exit fullscreen mode

o si está usando Yarn cómo administrador de paquetes:

yarn add -D tailwindcss autoprefixer postcss postcss-scss postcss-import postcss-loader
Enter fullscreen mode Exit fullscreen mode

Ahora necesitamos un paquete para poder crear nuestro webpack.config.js

Nuestro paquete es ngx-build-plus

ng add ngx-build-plus
Enter fullscreen mode Exit fullscreen mode

Configurar Tailwind CSS

  • Iniciamos el archivo de configuración tailwind.config.js en el proyecto, usando el siguiente comando npx tailwind init y tendremos cómo resultado este código 
module.exports = {
  prefix: "",
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
Enter fullscreen mode Exit fullscreen mode
  • En el archivo styles.scss añadimos las siguientes líneas 
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
Enter fullscreen mode Exit fullscreen mode

Configurar Webpack

  • Creamos un archivo llamado webpack.config.js en la raíz de nuestro proyecto y agregamos las siguientes líneas 
module.exports = {
    module: {
      rules: [
        {
          test: /\.scss$/,
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              ident: 'postcss',
              syntax: 'postcss-scss',
              plugins: [
                require('postcss-import'),
                require('tailwindcss'),
                require('autoprefixer'),
              ]
            }
          }
        }
      ]
    }
};
Enter fullscreen mode Exit fullscreen mode
  • Por último modificaremos nuestro archivo angular.json 
{
    ...
    "projects": {
        "angular11-tailwindcss": {
            ...
            "architect": {
                "build": {
                    "builder": "ngx-build-plus:browser",
                    "options": {
+                        "extraWebpackConfig": "webpack.config.js",
                        ...
                    },
                    ...
                },
                "serve": {
                    "builder": "ngx-build-plus:dev-server",
                    "options": {
+                        "extraWebpackConfig": "webpack.config.js",
                        ...
                    },
                    ...
                }
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Ahora podemos correr nuestro comando ng serve y probar nuestra aplicación

Ng Serve output console

TailwindCSS

  • Cómo ejemplo agregaremos el código que se encuentra en Tailwind Pay en nuestro archivo src/app/app.component.html 
<div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-cyan-400 to-light-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>
    <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20">
      <div class="max-w-md mx-auto">
        <div>
          <img src="/img/logo.svg" class="h-7 sm:h-8" />
        </div>
        <div class="divide-y divide-gray-200">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7">
            <p>An advanced online playground for Tailwind CSS, including support for things like:</p>
            <ul class="list-disc space-y-2">
              <li class="flex items-start">
                <span class="h-6 flex items-center sm:h-7">
                  <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="ml-2">
                  Customizing your
                  <code class="text-sm font-bold text-gray-900">tailwind.config.js</code> file
                </p>
              </li>
              <li class="flex items-start">
                <span class="h-6 flex items-center sm:h-7">
                  <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="ml-2">
                  Extracting classes with
                  <code class="text-sm font-bold text-gray-900">@apply</code>
                </p>
              </li>
              <li class="flex items-start">
                <span class="h-6 flex items-center sm:h-7">
                  <svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                </span>
                <p class="ml-2">Code completion with instant preview</p>
              </li>
            </ul>
            <p>Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online.</p>
          </div>
          <div class="pt-6 text-base leading-6 font-bold sm:text-lg sm:leading-7">
            <p>Want to dig deeper into Tailwind?</p>
            <p>
              <a href="https://tailwindcss.com/docs" class="text-cyan-600 hover:text-cyan-700"> Read the docs &rarr; </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Alt Text

Repositorio con un ejemplo

GitHub logo adrian-ub / angular11-tailwindcss

Angular 11 TailwindCSS 2

View on GitHub

Top comments (4)

Collapse
 
irojasaglr profile image
Ignacio Rojas Aguilar •

Algún motivo en especial para crear el tailwind.config.js manualmente en lugar de usar npx tailwind init ?

Collapse
 
adrianub profile image
Adrián UB •

No hay un motivo especial Jajaja pero aquí esta la historia

Iba realizando el proyecto mientras escribía el articulo y quería implementar el siguiente código:

tailwind.config.js

module.exports = (isProd) => ({
    prefix: '',
    purge: {
      enabled: isProd,
      content: [
        './apps/**/*.html',
        './apps/**/*.ts',
        './libs/**/*.html',
        './libs/**/*.ts',
      ]
    },
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
});
Enter fullscreen mode Exit fullscreen mode

webpack.config.js

const webpackMerge = require('webpack-merge');

module.exports = (config) => {
  const merge = webpackMerge && webpackMerge.merge ? webpackMerge.merge : webpackMerge;
  const isProd = config.mode === "production";
  const tailwindConfig = require("./tailwind.config.js")(isProd);

  return merge(config, {
    module: {
      rules: [
        {
          test: /\.scss$/,
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              ident: 'postcss',
              syntax: 'postcss-scss',
              plugins: [
                require('postcss-import'),
                require('tailwindcss')(tailwindConfig),
                require('autoprefixer'),
              ]
            }
          }
        }
      ]
    }
  });
};
Enter fullscreen mode Exit fullscreen mode

Pero no lo he logrado con el paquete ngx-build-plus

Ya que ese es el código que utilizo con el paquete @angular-builders/custom-webpack y me purgue el CSS en producción

Ya luego se me olvido cambiar esa parte

Collapse
 
marcusgv profile image
MarcusGV •

Que tal y ¿se puede usar tailwind con angular material tambien?

Collapse
 
adrianub profile image
Adrián UB •

Si se puede usar combinar Angular Material con TailwindCSS, yo recomiendo usar el prefix para que no haya inconvenientes con alguna clase de Angular Material

module.exports = {
+  prefix: "ub",
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},
   },
   variants: {
     extend: {},
   },
   plugins: [],
};
Enter fullscreen mode Exit fullscreen mode

Read next

grapplingdev profile image

Mastering Frontend Development

Dan @roadmap.sh -

zoltanszogyenyi profile image

Open-source WYSIWYG text editor component built with Tailwind CSS and Flowbite

Zoltán Szőgyényi -

mike_andreuzza profile image

How to create a virtual keyboard with Tailwind CSS and JavaScript

Michael Andreuzza -

nazislam profile image

How to Share Data Between Components in Angular Without a Parent-Child Relationship

Naz Islam -