DEV Community

loading...

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

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