Tailwind CSSをVue.jsに導入

Tailwind CSSをVue.jsに導入する手順をメモ用に残してみました。

1. 自分のプロジェクトディレクトリ直下に入る

2. Tailwindをインストール

   npm install -D tailwindcss@latest
   

3. PostCSSインストール

   最新のpostcss8はまだサポートされていないためpostcss7をインストールする(2021/02/27時点)

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

4. configurationファイルを作成
   tailwind.config.js,postcss.config.jsの２つのファイルを作成する。

   npx tailwindcss init -p
   

5. tailwind.config.jsに未使用のスタイルを削除するファイルを設定

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

6. CSSにTailwindをインポート
   ./src/assts/style/tailwind.cssファイルを作成し、下記の内容を記述する。

   /*./src/assts/style/tailwind.css*/
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

7. tailwind.cssファイルをインポート
   src/main.jsにtailwind.cssを設定

   import { createApp } from 'vue'
   import App from './App.vue'
   import './src/assts/style/tailwind.css'
   
   createApp(App).mount('#app')
   

---

公式ドキュメント