[컴] vuejs 2.x 에서 tailwindcss 사용하기

 

install / vue 2.x

vuejs 2.x 에서 tailwindcss 사용하기

설치

postcss v8 은 문제가 생긴다. 그래서 v7 을 사용한다. 자세한 이야기는 link 를 참고하자.

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

postcss.config.js

// postcss.config.js

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

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

asset/tailwind.css

// src/assets/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

main.js

// main.js
import './assets/styles/index.css';
// import('@/assets/styles/index.css');

purge option

purge option 을 넣으면, src에서 사용하지 않은 class 들을 빼준다.

// tailwind.config.js

module.exports = {
  purge: [
    './public/**/*.html',
    './src/**/*.vue',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Reference

  1. Use Tailwind 2 with Vue CLI - DEV Community
  2. Tailwind CSS Purge: Optimize Angular for Production

댓글 없음:

댓글 쓰기