【Nuxt.js】TailwindCSSの導入について

はじめに

こんにちは。
こちらの記事では、Nuxt.jsにTailwindCSSの導入を行う方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。

TailwindCSSとは

TailwindCSSとは、ユーティリティファーストのCSSフレームワークです。
template（HTML）のクラス属性に対して直接ユーティリティクラスを定義するため、他のCSSが影響してデザインが崩れたり、クラス名を考える必要がなくなります。最近では、VueやReactなどを用いた開発の現場で採用されることが多い。

TailwindCSS：https://tailwindcss.com/

ユーティリティファーストとは

フレームワークとして独自のクラスを用意しており、いくつかのクラスを組み合わせることで生のCSSを使用せずにスタイリングが行える考え方のこと。

Bootstorapとの違い

• classひとつひとつにCSSプロパティが対応しているので自由度が高い
• ビルド時に不要なクラスを削除してくれるのでファイルサイズが軽い
• JavaScriptに依存しないので競合する心配がない

実装手順

Nuxtの新規プロジェクト作成時に、UIフレームワークをTailwindCSSで選択している場合は、すでにインストールされているのでpackage.jsonとnuxt.config.jsに以下のような表示があるか確認する。

package.json

"devDependencies": {
  "@nuxtjs/tailwindcss": "^4.2.0"
}

nuxt.config.js

buildModules: [
  '@nuxtjs/tailwindcss',
]

表示されていればOKです。

1. tailwind.cssの作成・編集

assetsディレクトリに以下のような構成で、css/tailwind.cssを作成・編集する。
assetsディレクトリがない場合はプロジェクト直下に作成する。

プロジェクト名/
　├ assets/
　│ └ css/
　│ 　└ tailwind.css
　├ components/
　└ pages/
〜〜〜

tailwind.css

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

2. tailwind.config.jsの作成・編集

下記のコマンドを実行してtailwind.config.jsファイルを作成する。
※コマンドに-pをつけてしまうと、不要なフォルダが作成されてエラーになるので注意。

npx tailwindcss init

ファイル作成後、purgeに以下のように編集を行う。

tailwind.config.js

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

3. nuxt.config.jsの編集

どのファイルでも使用できるように、nuxt.config.jsを編集する。

nuxt.config.js

css: [
  '~/assets/css/tailwind.css',
]

おわりに

ここまでTailwindCSSの導入についてまとめました。
これから実際にレイアウトを組んでいくので、ヘッダーの作成やページごとのスタイリングも記事にしていきたいと思います。

以上、最後まで読んでいただきありがとうございました！