CODEWITHSUNDEEP
csstailwind-css
user15335432
user15335432

Reputation:

Tailwind css does not reduce file size after purge

i have a basic html file (index.html), my project structure is like below :

and here contents for each files

module.exports = {
purge: {
    enabled:true,
    content:['./*.html', './**/*.html'],
    layers: ['components']
},
theme: {
    extend: {
        fontSize:{
            'small' : '.6rem',
            // Or with a default line-height as well
            '3xl': ['2.5rem', {
                lineHeight: '50px',
            }],
            '6xl': ['3.70rem', {
                lineHeight: '60px',
            }],
        },
        colors:{
            transparent: 'transparent',
            current: 'currentColor',
            orange:{
                DEFAULT: '#F47521'
            }
        },
        screens: {
            'sm': '640px',
            'md': '760px',
            'custom' : '980px',
            'lg': '1024px',
            'xl': '1280px',
            '2xl': '1536px',
            '3xl': '1600px',
            'xxl' : '1700px'
        }
    }
},
variants: {
    textColor: ['responsive', 'hover', 'focus', 'visited'],
},
plugins: [
    ({addUtilities}) => {
        const utils = {
            '.translate-x-half': {
                transform: 'translateX(50%)',
            },
        };
        addUtilities(utils, ['responsive'])
    }
]
};

the postcss file

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    }
}

and my package.json

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "my theme",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "NODE_ENV=production npx tailwindcss-cli@latest build tailwind.css -o dist.css",
    "build:css": "postcss tailwind.css -o dist.css"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
  "autoprefixer": "^10.2.5",
  "postcss": "^8.2.8",
  "tailwindcss": "^2.0.4"
  },
   "dependencies": {
      "cssnano": "^4.1.10",
      "postcss-cli": "^8.3.1"
   }
}

when building with : npm run build, tailwind build the project but the dist.css size remains 5,7MB

What i'm doing wrong here?

thank you

Upvotes: 3

Views: 828

Answers (1)

Nathan Dawson
Nathan Dawson

Reputation: 19308

You have purge configured to apply to the 'components' layer.

Tailwind has three layers: 'base', 'components', and 'utilities'. Components is the smallest of the three so its impact on the resulting filesize will be fairly minimal. You're hitting 5.7MB because by far the largest layer, 'utilities', is being ignored.

Update your purge configuration to apply to utilities too. Unless there's a good reason to be selective with layers, you probably want to drop any specificity and allow it to apply to all layers.

Furthermore, if you leave out enabled, it will be handled automatically based on your NODE_ENV setting.

https://tailwindcss.com/docs/optimizing-for-production#purging-specific-layers

Upvotes: 2

Related Questions