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

 

install / vue 2.x

vuejs 2.x 에서 tailwindcss 사용하기

설치

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

• Installing tailwind 2 in vue 3 raises the error PostCSS plugin tailwindcss requires PostCSS 8 · Issue #2861 · tailwindlabs/tailwindcss · GitHub
• Installation - Tailwind CSS

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: [],
};

See Also

1. Tailwind Starter Kit | Free Components Library for TailwindCSS, tailwind 로 어느정도 template(?) 을 만들어놨다.

Reference

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