【TailwindCSS】TailwindCSSをNuxt.jsに組み込んでみる

Nuxt環境にTailwindCSSを組み込む手順めもです。

TailwindCSS…ユーティリティクラスを提供するCSSフレームワーク。
用意されているclassをHTMLに当てていくだけで簡単にスタイルが設定できます。
例：class=“mt-10”　→　margin-top: 2.5rem; みたいな感じ。
カスタマイズ性の高さが特徴。下記は公式サイト。
公式：Tailwind CSS – Rapidly build modern websites without ever leaving your HTML.

組み込み手順

①Nuxt環境構築する。

npx create-nuxt-app my-project

※UIFrameworkでTailwind CSSを選択しないようにしてください。
以前はこの段階でフレームワークとしてTailwindを選択していましたが、現在はmoduleとして読み込みます。

※もし既にTailwindCSSのmoduleなどをインストールしている場合はアンインストール。

npm uninstall @nuxtjs/tailwindcss tailwindcss

②新しくTailwindCSSをインストールする。

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

※NuxtはPostCSS8をサポートしていないため、上記のようにPostCSS7をバージョン指定する。

③next.config.jsのbuildModulesにTailwindCSSを記述する。

  buildModules: [
    ‘@nuxtjs/tailwindcss’
  ],

④tailwind.config.jsを作成。

　npx tailwindcss init

⑤purgeオプションを使用するため、purgeの中に下記を追加。
（TailwindCSSを使用したい.vueファイルが存在する全てのフォルダパスを記述してください。）

   purge: [
     ‘./components/**/*.{vue,js}’,
     ‘./layouts/**/*.vue’,
     ‘./pages/**/*.vue’,
     ‘./plugins/**/*.{js,ts}’,
     ‘./nuxt.config.{js,ts}’,
   ],

※PurgeCSS…未使用のclassをcssファイルから削除してくれる。
TailwindCSSは色々なclassを含んでいるためそのままではファイルサイズが肥大化してしまうので、PurgeCSSを設定してあげる。
※SCSSを使用する場合、＆で連結したclass名も削除されてしまうので注意。

⑥assets/css/tailwind.cssを作成し、下記を記述。

@import ‘tailwindcss/base’;
@import ‘tailwindcss/components’;
@import ‘tailwindcss/utilities’;

※グローバルに使いたい場合はnuxt.config.jsに下記を追加する。

css: [
  ‘~/assets/css/tailwind.css’,
],

所感

• 最初はちょっと面倒でした！いちいち下記サイトよりスタイルを探して当てていかなければいけません。。
  Documentation – Tailwind CSS
• 慣れてくるとサクサク進めるので楽しくなってきます。。
• どうしてもHTMLのクラス名は冗長になってしまいますが、Nuxtだとそんなに気になりませんでした。普通のHTMLに当てていく分には好みが分かれそうです。。
• 擬似要素（before/after）へのクラス当てが出来ませんでした。。。
  擬似要素専用のプラグインがあるようです。今後組み込んで使ってみたいです。
  https://github.com/croutonn/tailwindcss-pseudo-elements
• 今後のメンテナンスが楽そうだな、と言うのが一番大きなところです。HTMLのクラスの付け外しだけで殆どスタイル調整できてしまうので、ありがちな「共通スタイルを修正してしまい、知らない内に別のところに影響が出た」がなくなります。自前で管理するCSSの量も減るので見通しも良くなりそう。。