環境

macos

node -v
v15.1.0

npm -v
7.0.8

vue --version
@vue/cli 4.5.12

npm list vue
vue@2.6.14

"postcss": "^7.0.35",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.4",

※ vue3でも試したところうまく行った(vue@3.1.1)

参考資料

メイン資料
How to Setup Tailwind CSS in Vue 3 | by Victor Onuoha Martins | Apr, 2021 | JavaScript in Plain English

npmでビルドする方法を参考にさせていただきました https://tech.medpeer.co.jp/entry/better-tailwind-css

セットアップ手順

プロジェクト作成

vue create tailwind-app

cd tailwind-app

参考資料のように

Error: PostCSS plugin tailwindcss requires PostCSS 8.

これが後々でてきたので、tailwindに関わるインストールは以下を実行した

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

tailwind.config.js やpostcss.config.jsのファイルを作成。

npx tailwindcss init -p

このファイルが作成される。

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

ファイルを以下のように変更

// tailwind.config.js
  module.exports = {
    purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

mkdir src/styles && touch src/styles/app.css

/* ./src/styles/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

tailwindでビルドしたcssファイルをインポートする

// main.js(javascript)
import { createApp } from 'vue';
import App from './App.vue';
import './styles/index.css'; // コレ
createApp(App).mount('#app');

※ src/styles/index.cssを作成するには以下のようにする

// package.json
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build:css": "tailwindcss build src/styles/app.css -o src/styles/index.css" // コレ
  },

// index.cssを作成
npm run build:css

App.vueを以下のようにする

<!-- App.vue -->
<template>
  <div class="justify-center flex bg-yellow-300 items-center h-screen">
    <div class="text-4xl">
      Hello 👋🏼
    </div>
  </div>
</template>
<script>
export default {
  name: 'App',
};
</script>

画面を表示させてみる