DEV Community

loading...
Cover image for C贸mo usar Tailwind CSS 2 en Angular 11 馃帀馃帀

C贸mo usar Tailwind CSS 2 en Angular 11 馃帀馃帀

adrianub profile image Adri谩n UB Originally published at adrianub.vercel.app Updated on 銉4 min read

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

Discussion (4)

pic
Editor guide
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 Author

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 Author

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