vue-cliにtailwind CSSを導入する - webエンジニアの気づき

概要

vue-cliで作成しているプロジェクトにtailwind CSSを導入したのでその時のメモ

前提

vue-cliでプロジェクト作成ができていること

手順

1. tailwindcssのインストール

npm install -D tailwindcss postcss autoprefixer でtailwindcssのインストールを行います。

2. tailwind.config.jsを作成

tailwind.config.jsを作成します。npx tailwindcss init のコマンドを入力してください。作成したファイルの中身を以下のように編集してください。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. postcss.config.jsを作成

postcss.config.jsを作成します。こちらはプロジェクトルートディレクトリに作成してください。作成したファイルの中身を以下のように編集してください。

postcss.config.js

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

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

4. tailwind.cssを作成

tailwind.cssを作成します。ディレクトリは今回はsrc/assets/ に css用のディレクトリを追加してその配下にファイルを設置します。

src/assets/css/tailwind.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

5. 読み込みの設定

最後に読み込みの設定を行います。import '@/assets/css/style.css';を適用したいファイルに設置してください。例としてApp.vueに設置してみます。

App.vue

(省略)
.......

<style>
@import '/assets/css/common/tailwind.scss'
</style>

これで読み込んだファイル配下でtailwind CSSが利用できるようになります。(今回はApp.vueで適用したので、vueファイル全体に適用)

参考

https://devsakaso.com/vue-js-tailwindcss-installation/

https://cly7796.net/blog/javascript/use-tailwind-css-with-vue-cli/