2021年3月30日星期二

Tailwind css not reduce file size after purge

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

  • index.html
  • tailwind.config.js
  • postcss.js
  • tailwind.css
  • dist.css

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

https://stackoverflow.com/questions/66876272/tailwind-css-not-reduce-file-size-after-purge March 31, 2021 at 02:08AM

没有评论:

发表评论