Discussion on: Cómo usar Tailwind CSS 2 en Angular 11 🎉🎉

[Ignacio Rojas Aguilar]

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

[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: [],
});

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'),
              ]
            }
          }
        }
      ]
    }
  });
};

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