Vue에 Tailwind 적용하기

순서

프로젝트 생성

vue 프로젝트 만들기 (vue-cli 버전3 이상) vue create [project 이름]

cd [project 이름]

tailwindcss 설치 및 적용

tailwindcss 설치 npm install tailwindcss

/* src/assets/css/tailwind.css */

@tailwind base;

@tailwind components;

@tailwind utilities;

// src/main.js

...
import "@/assets/css/tailwind.css";
...

project root dir 에서 npx tailwindcss init --full
tailwind.config.js 에 원하는 플러그인,테마 등 추가 가능

// /postcss.config.js

const autoprefixer = require('autoprefixer')
const tailwindcss = require('tailwindcss')

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

파일 사이즈 줄이기

npm install @fullhuman/postcss-purgecss --save-dev

// postcss.config.js 를 수정한다.
const autoprefixer = require('autoprefixer')
const tailwindcss = require('tailwindcss')

const purgecss = require('@fullhuman/postcss-purgecss')({

    // Specify the paths to all of the template files in your project
    content: [
        './src/**/*.html',
        './src/**/*.vue',
        './src/**/*.jsx',
        // etc.
    ],

    // This is the function used to extract class names from your templates
    defaultExtractor: content => {
        // Capture as liberally as possible, including things like `h-(screen-1.5)`
        const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []

        // Capture classes within other delimiters like .block(class="w-1/2") in Pug
        const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []

        return broadMatches.concat(innerMatches)
    }
})

module.exports = {
    plugins: [
        autoprefixer,
        tailwindcss,
        ...process.env.NODE_ENV === 'production'
            ? [purgecss]
            : []
    ]
}