ViteとVue3にTailwind CSSを導入する

ViteプロジェクトでCSSフレームワークのTailwind CSSを導入する方法を紹介します。ついでに、Tailwind CSS用のStylelintのルールやVSCodeの設定をします。

2021/10/102 min read
..
hero image

はじめに

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

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

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

環境構築

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

1
2
yarn add -D tailwindcss sass
yarn tailwindcss init
bash

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

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;
src/assets/styles/tailwind.scsscss

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

1
2
3
module.exports = {
plugins: [require('tailwindcss'), require('autoprefixer')],
}
postcss.config.jsjs

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

例ではパスエイリアスでパスを指定しています。各自適切なパスを設定してください。
1
2
3
4
5
6
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に設定します。

1
2
3
4
{
"scss.validate": false,
"css.validate": false
}
.vscode/settings.jsonjson

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

これを解消しましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"rules": {
"at-rule-no-unknown": [
true,
{
"ignoreAtRules": [
"tailwind",
"apply",
"variants",
"responsive",
"screen",
],
},
],
}
}
.stylelintrcjson

PurgeCSS でビルドを最適化する

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 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
tailwind.config.jsjs

ちなみに ES Module 形式ではなく、CommonJS 形式で記述している理由は、Tailwind CSS のプラグインが ES Module 形式を認識できないからです。.js形式なのも同様の理由です。

さてこれにて Tailwind CSS の環境が構築できました。


Edit this page on GitHub

Other Article

Comments