tailwindcss

purgecss 사용방법( 사용하지 않는 css 제거 라이브러리 )

땀모 2019. 8. 20. 06:30

1. npm으로 설치

1
npm install @fullhuman/postcss-purgecss
cs


2. 사용할 모듈 추가, 페이지도 추가

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
    plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('@fullhuman/postcss-purgecss')({
        content : [
 
            './src/**/*.vue',
            './public/index.html',
        ]
    })
    ]
}
cs


3. 정규표현식 넣어주기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
    plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('@fullhuman/postcss-purgecss')({
        content : [
 
            './src/**/*.vue',
            './public/index.html',
        ],
        defaultExtractor: content => content.match(/[A-Za-z0-9_:/]+/g) || []
    })
    ]
}
cs


4. 빌드

1
npm run build
cs


5. tailwind.css 에 사용하지 않은 css가 제거 된다.


파일 용량도 줄겠지?