real-project 과정

1. vue create real-project

하고나면 npm 사용할건지 yarn 사용할건지 물어봄

2. cd real-project 

3. npm run serve

#npm 사용 포트 설정해줄 때 npm run serve -- --port 포트번호

#ctrl+C 하면 종료

4. tailwind 설정

  [tailwind CSS 패키지 설치]

  $ npm install tailwindcss --save-dev

  [/tailwind.config.js 생성]
  $ node_modules/.bin/tailwind init tailwind.config.js

  [/.postcssrc.js 생성 및 설정코드 작성]
  $ vi .postcssrc.js

module.exports = {
	"plugins": [
    	require)'postcss-import')(),
        require('tailwindcss')('./tailwind-config.js'),
        require('autoprefixer')(),
    ]
}

 [/src/assets/styles/main.css 파일 생성 및 tailwind 설정]

@tailwind preflight;
@tailwind utilities;

 [/src/App.vue 파일 수정]

 *App.vue 파일에 import '@/assets/styles/main.css' 추가

 <script>안에다가 

 $ import '@/assets/styles/main.css' //추가

[main.js에 내용추가]

$tailwindcss/tailwind.css'

 

#script 내에 Import해두고 사용하지 않으면 오류뜸 → 지워줘야 함

 

두번째로 tailwind 설정한 방법

1. ./src/assets/tailwind.css 만들고 추가

/* tailwind사용하기 위해 */
@tailwind base;
@tailwind components;
@tailwind utilities;

 

2. root에 postcss.config.js 만들고 아래코드 입력

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

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

3. root에 vue.config.js 있으면 거기다 없으면 만들어서 추가

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
},
{
  configureWebpack:{
    module:{
      rules:[
      {
        test: /\.css$/,
        use: ['postcss-loader']
      }
    ]
  }}
})

4. 용량문제 발생할 때 대비해서 purgecss 설치해주기 ★ (불필요한 클래스나 css 삭제해줌)

$ npm add —dev @fullhuman/postcss-purgecss 

yarn쓰면 yarn으로 설치

postcss.config.js에 내용추가

const autoprefixer = require('autoprefixer')
const tailwindcss = require('tailwindcss')  
//아래 내용 추가
const purgecss = postcssPurgecss({
    content: ['./public/**/*.html', './src/**/*.vue', './src/**/*.js'],
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
    whitelistPatterns: [
     /-(leave|enter|appear)(|-(to|from|active))$/,
     /^(?!(|.*?:)cursor-move).-move$/,
     /^router-link(|-exact)-active$/
   ]
  })

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

참고자료 : https://imkh.dev/vue-tailwindcss/