ViteとVue3にTailwind CSSを導入する

はじめに

Vite は No bundle 掲げており、開発時に高速な HMR を提供してくれます。しかし、CLI を用いたデフォルトテンプレート自体はかなりシンプルになっているため、Vite プロジェクトを始める際、他のモジュールを使うには自分で環境を構築しなければなりません。

今回は Vite を使って、CSS フレームワークである Tailwind CSS の環境構築をします。

なお、こちらの環境をベースに説明するので、適宜参考にしてください。以下では Vite プロジェクトがある前提で説明します。

環境構築

まずは、Tailwind CSS モジュールをインストールし、設定ファイルを生成します。ついでに、scssやsassも使いたいので、それ用のモジュールもインストールします。

yarn add -D tailwindcss sass
yarn tailwindcss init

bash

続いて、tailwind のディレクティブを注入するために、スタイルファイルを用意します。

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

src/assets/styles/tailwind.scsscss

PostCSS の設定ファイルも必要なので、プロジェクトルートに用意します。

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

postcss.config.jsjs

最後にスタイルファイルをエントリーポイントでインポートします。

例ではパスエイリアスでパスを指定しています。各自適切なパスを設定してください。

import { createApp } from 'vue'
import App from '/@/App.vue'
import '/@/assets/styles/main.scss'
import '/@/assets/styles/tailwind.scss'

createApp(App).mount('#app')

src/main.tsts

これで開発時に Utility Class を使えるようになりました。

DX を向上させる

VSCode では tailwind のインテリセンスを効かせることができます。こちらからインストールしてください。

また、VSCode ではデフォルトでcssのバリデーションを行っているので、unknownAtRulesが出ています。それを、解消するには以下のようにsettings.jsonに設定します。

{
  "scss.validate": false,
  "css.validate": false
}

.vscode/settings.jsonjson

Stylelint を使っている場合は、@tailwindや、@applyなど tailwind 特有の構文が Stylelint のルールに引っかかることがあります。

これを解消しましょう。

{
  "rules": {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": [
          "tailwind",
          "apply",
          "variants",
          "responsive",
          "screen",
        ],
      },
    ],
  }
}

.stylelintrcjson

PurgeCSS でビルドを最適化する

tailwind はそのままビルドしてしまうと、使っていない膨大な Utility Class も一緒にバンドルされてしまいます。

Tailwind CSS は PurgeCSS を標準でサポートしているため、設定してビルドを最適化しましょう。

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { join } = require('path')
const BASE_DIR = join(__dirname, 'src')
const VUE_FILE = join('**', '*.vue')

const config = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: {
    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
    enabled: process.env.NODE_ENV === 'production',
    content: [join(BASE_DIR, VUE_FILE), join(__dirname, '*.html')],
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins:[],
}

module.exports = config