Vue CLIでTailwind CSSを使用する

Vue CLIとTailwind CSSを組み合わせて使ってみます。

設定方法

まずはVue CLIでプロジェクトの作成を行います。
Vue CLIの設定に関しては下記記事をご確認ください。
Vue CLIを使ってみる

Vue CLIの設定完了後、必要なパッケージをインストールします。

npm install -D tailwindcss postcss autoprefixer

プロジェクトルートにpostcss.config.jsを作成します。

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

同じくプロジェクトルートにtailwind.config.jsを作成します。
contentにTailwind CSSを使用するファイルパスを指定してください。

module.exports = {
  future: {},
  content: [
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

src/assets/ に tailwind.cssを作成します。

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

src/main.js に下記を追加して、先ほど追加したtailwind.cssをインポートします。

import '@/assets/tailwind.css'

以上で設定完了です。
これでTailwind CSSが使えるようになりました。