Vue-CLI v2で、Tailwind cssを使えるようにするまでの過程をご紹介します。

Tailwindをインストール

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

configファイルの設定

npx tailwind init

このような中身のconfigファイルが生成されると思います。

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js の作成と設定

どちらかの方法で作成できます。

1.ターミナルで下記を叩く

touch postcss.config.js

2.エディタで直接ファイルを作成する

postcss.config.jsに下記の記述をしていきます。

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Tailwind cssを読み込む

src/assets/css/main.css

@Tailwind base;
@Tailwind components;
@Tailwind utilities;

最後に、main.jsにcssをインポートをして完了となります。

// tailewind css
import '@/assets/css/main.css';