Is the build version of Tailwind CSS supposed to be this big (2.46 MiB)

[thecyrilcril]

λ npm run production

> @ production C:\wamp64\www\Lendr
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js



 DONE  Compiled successfully in 69569ms                                                                                                             5:44:35 AM

                 Asset      Size  Chunks                    Chunk Names
          /css/app.css  2.46 MiB       0  [emitted]  [big]  /js/app
            /js/app.js   116 KiB       0  [emitted]         /js/app
/js/app.js.LICENSE.txt  87 bytes          [emitted]

I am working on a Laravel Project and I wonder why my final css file is so huge even in production. I will appreciate some insights and guidance to reducing the final app.css file

tailwind.config.js

module.exports = {
  purge: {
    content: ['./resources/views/**/*.blade.php'],
  },
  future: {
    removeDeprecatedGapUtilities: true,
  },
  theme: {
    extend: {
      width: {
        '96': '24rem'
      }
    },
  },
  variants: {},
  plugins: [
    require('@tailwindcss/custom-forms'),
  ],
}

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .browserSync('http://127.0.0.1:8000/');

[yellow1912]

I dont remember exactly but it's huge. You need to remove things that you dont use via the settings. For example for my purpose I removed all colors and some pseudo states etc. And even then, the css is about 1MB, gzip is about 110KB. I imagine purging would help alot but it's difficult to purge when you are on a legacy multiple pages app.

[RoccoHoward]

@seewhy17 The build file on production should be getting purged if the configuration is correctly done. It appears that yours is not - so that file size is correct if you include everything in Tailwind.

Before anyone anyone can help, you've pasted your webpack.mix.js incorrectly - it's a copy of your tailwind.config.js file?

Have you watched https://www.youtube.com/watch?v=ZNLeQDpE_8M?

[thecyrilcril]

@RoccoHoward Yes it was I have corrected it now.
Found the template that came with laravel 8, seems to work for me

[simonswiss]

That 2.46 MiB size sounds just about right for a non-purged CSS output with Tailwind.

I see that you are running your script with NODE_ENV=production, which should trigger a purge, so the problem is likely either in your content array of paths, or something in your mix config.

Found the template that came with laravel 8, seems to work for me

Does it mean you have now figured it out, or is this still an issue for you @seewhy17?

[thecyrilcril]

@simonswiss yes pretty much, it looks like this now: purge: ['./storage/framework/views/*.php', './resources/views/**/*.blade.php', './resources/js/**/*.vue'], to accomodate the styles in my vue files.
Thanks!!

[simonswiss]

Great - glad you got it sorted! 🎉