[Vue.js2 + tailwindcss] build 설정 방법

main.js

import Vue from "vue";
import App from "./App.vue";
import "tailwindcss/tailwind.css"; 👈
import "@/src/assets/global.css"; 👈

new Vue({
  render: (h) => h(App),
}).$mount("#app");

 

tailwind.config.js

module.exports = {
    purge: ['./src/**/*.html', './src/**/*.js'], // 👈
    prefix: 'tw-',
    // ...
}

 

postcss.config.js

프로젝트 홈 경로에 postcss.config.js 파일 생성 후 다음을 작성

const autoprefixer = require("autoprefixer");
const tailwindcss = require("tailwindcss");

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

vue.config.js

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.join(__dirname, "/"),
      },
    },
    module: { 👈
      rules: [
        {
          test: /\.css$/,
          use: ["postcss-loader"],
        },
      ],
    },
  },
});

 

 

참사

해결 방법

1. vue add tailwind

터미널에 프로젝트 경로에서 다음 명령어 입력

vue add tailwind

none 설정(나는 기존에 사용하던 tailwind.config.js가 있음.)

 > src/assets/tailwind.css가 자동으로 생성됨.

 

 

2. 기존에 있는 tailwind.config.js에 다음 설정 변경

module.exports = {
    purge: ['./src/**/*.html', './src/**/*.{js,ts,vue}'], // 👈
    prefix: 'tw-',
    // ...
}

3. ./src/main.ts

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

 

 

결과 확인