Nuxt•3mo ago

Excessive CSS in Nuxt3 with Tailwind: Unexpected Unused Styles

Hello everyone, I'm working on a project using Nuxt3 and Tailwind CSS. Everything is running smoothly, but I've noticed that the generated source code includes a very large amount of CSS. It seems that all of Tailwind's styles are being loaded instead of only the ones I'm using. Is this the expected behavior, or might I have misconfigured something? So I would like to know if the style in source code of this size in production is expected? If not what Im missing or how to fix this problem Thanks in advance for your help! You can check the source code here: https://www.get.it/

In my nuxt.config.ts Im passing 
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
      ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
    },
  },

tailwind.config.js:

import plugin from 'tailwindcss/plugin';
import daisyui from 'daisyui';

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'class',
  content: ['./components/**/*.{js,vue,ts}', './layouts/**/*.vue', './pages/**/*.vue'],
  theme: {
    extend: {
      textShadow: {
        DEFAULT: '0 4px 4px rgba(0, 0, 0, 0.25)',
      },
      colors: {
        purple: '#7f417f',
        green: '#387e3f',
        greenhover: '#4ca956',
        cgreen: {
          400: '#5BA262',
          500: '#4d9a55',
        },
        orange: '#eb6320',
        link: '#1A0DAB',
      },
      fontFamily: {
        sans: ['Roboto', 'sans-serif'],
        ubuntu: ['Ubuntu'],
        ubuntuItalic: ['UbuntuItalic'],
        arial: ['Arial', 'arial', 'sans-serif'],
      },
      lineHeight: {
        body: 1.5,
      },
    },
  },
  daisyui: {
    darkTheme: false,
  },
  plugins: [
    daisyui,
    plugin(({ matchUtilities, theme }) => {
      matchUtilities(
        {
          'text-shadow': (value) => ({
            textShadow: value,
          }),
        },
        { values: theme('textShadow') },
      );
    }),
  ],
};

Grow Your Business @ Get.It

Grow your team, brand and revenue in one place. . . for free

2 Replies

kapa.ai•3mo ago

Hi @elizeorocha. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question and the knowledge sources available, it appears that you're experiencing an issue with excessive CSS in your Nuxt 3 project using Tailwind CSS. This is not the expected behavior for a production build, and there are a few things we can consider to address this issue. 1. Purging Unused Styles: Tailwind CSS should automatically purge unused styles in production builds. However, it seems this might not be happening correctly in your case. 2. Content Configuration: Your tailwind.config.js file includes a content array that specifies where Tailwind should look for class names to preserve. Make sure this array includes all the files where you use Tailwind classes. You might want to consider expanding it to include more file types or directories if necessary. 3. Build Configuration: In your nuxt.config.ts, you're using cssnano for production builds, which is good for minimizing CSS. However, there might be an issue with how Tailwind's purging is interacting with Nuxt's build process. To address this, you could try the following: 1. Update your nuxt.config.ts to explicitly enable Tailwind's purging:

export default defineNuxtConfig({
  // ... other config
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
      ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
    },
  },
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
})

export default defineNuxtConfig({
  // ... other config
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
      ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
    },
  },
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
})

2. Ensure that your tailwind.config.js content array is correctly configured to include all relevant files:

module.exports = {
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
    './app.vue',
  ],
  // ... rest of your config
}

module.exports = {
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
    './app.vue',
  ],
  // ... rest of your config
}

3. You might also want to try using the nuxt-purgecss module, which can help with removing unused CSS. However, be cautious as this might cause issues with dynamic class names. As mentioned in a Stack Overflow post, some users have experienced problems with this module Stack Overflow Post. If these steps don't resolve the issue, it's possible that there might be a conflict between Tailwind, DaisyUI, and Nuxt's build process. In that case, you might need to investigate further or consider simplifying your setup to isolate the cause of the problem. Remember, the goal is to have Tailwind purge unused styles in the production build, resulting in a much smaller CSS file. If you're still seeing all of Tailwind's styles in your production build after trying these steps, there might be a more specific issue with your setup that requires further investigation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@963484488501960735> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Excessive CSS in Nuxt3 with Tailwind: Unexpected Unused Styles

Did you find this page helpful?