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