Vue 3でtailwindcssを使う方法

Vue.js

Vue 3でtailwindcssを使う方法です。

Vue 3でtailwindcssを使う方法

vueプロジェクトの作成

vue create プロジェクト名

まずはvueプロジェクトを作成します。

tailwindcssのインストール

https://tailwindcss.com/docs/installation
を訪れて、状況に合わせて必要なインストール方法を選択します。

PostCSS 8の対応がまだの場合、たとえば、上のページに記載されている下の文でインストールします。


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

configファイルを作成

インストールが完了したら、上のページの
Create your configuration fileにかかれている通り、下のコマンドでtailwindcssを初期化します。


npx tailwindcss init

そうすると、tailwind.config.jsが作成されます。

エラー：Cannot find module 'autoprefixer’

上のコマンドで下のようにエラーが出る場合があります。
そして、tailwind.config.jsが生成されない場合があります。


Cannot find module 'autoprefixer'
Require stack:
- /.npm/_npx/47053/lib/node_modules/tailwindcss/lib/cli/commands/build.js
- /.npm/_npx/47053/lib/node_modules/tailwindcss/lib/cli/commands/index.js
- /.npm/_npx/47053/lib/node_modules/tailwindcss/lib/cli/main.js
- /.npm/_npx/47053/lib/node_modules/tailwindcss/lib/cli.js

https://github.com/tailwindlabs/tailwindcss/issues/2831
で解決策が提示されています。
下のコマンドを順番に実行すると解決する場合が多いです。


npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

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

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

purgeの部分を少し修正しています。

postcss.config.jsの設定

そして、上のエラーの手順でインストールした場合、postcss.config.jsが生成されています。
ない場合はルート直下に作成します。
そして、次のように記述します。

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

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

assets/css/style.cssの設定

assetsフォルダにcssフォルダを作成し、style.cssを作成します。
中身は上のtailwindcssにかかれている通り、次のように記述します。

@tailwind base;
@tailwind components;
@tailwind utilities;

main.jsで読み込む

そして、main.jsで作成したcssのファイルを読み込みます。

import '@/assets/css/style.css';

tailwindcssが適用されない場合

一度npmのserveを切ってからもう一度立ち上げてみましょう。

Vue.js

Posted by devsakaso