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: {} } : {}),
    },
  },

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

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

Nuxt•14mo ago•

4 replies

elizeorocha

Excessive CSS in Nuxt3 with Tailwind: Unexpected Unused Styles

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

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

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

Excessive CSS in Nuxt3 with Tailwind: Unexpected Unused Styles

Excessive CSS in Nuxt3 with Tailwind: Unexpected Unused Styles

Similar Threads

Similar Threads

Similar Threads