こんにちは。
野中やすおです。
今回の記事では、Nuxt.jsにTailwind CSSする手順について記事にします。
Nuxtプロジェクトにtailwindcss, postcss, autoprefixerを導入
Nuxtプロジェクトは既につくらられていることを前提とします。
早速Nuxtプロジェクトの中で以下のコマンドを使って「tailwindcss」、「 postcss」、「 autoprefixer」をインストールします。
|
1 |
pnpm install -D tailwindcss postcss autoprefixer |
Tailwindとは別にpostcssやautoprefixerをインストールする理由として、Tailwindの依存関係をインストールし、Tailwindより便利に活用することができるためです。Tailwind CSSは内部でPostCSSを使用しており、カスタムのデザインシステムや複雑なロジックをCSSに組み込むことができるようになります。
またAutoprefixerはPostCSSのプラグインで、CSSにベンダープレフィックスを自動的に追加します。これにより異なるブラウザでの互換性を確保するがきるようになります。
より詳細な説明については、こちらの公式HPをご覧ください。
A guide to using Tailwind with common CSS preprocessors like…
tailwind.config.jsを生成
次にini コマンドを実行して、tailwind.config.jsファイルを生成します。
|
1 |
npx tailwindcss init |
NuxtのPostCSSの構成にTailwindを追加する
nuxt.config.tsファイル(TypeScriptを採用している場合)内のpostcssにtailwindとautoprefixerを追加します。私の場合は以下のように設定しました。
|
1 2 3 4 5 6 7 8 9 |
// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ postcss: { plugins: { tailwindcss: {}, autoprefixer: {}, }, }, }); |
postcss plugins内にどのようなオプションを入れるべきかはまた別記事にしたいと思います。
tailwind.config.jsに必要なファイルパスを追加
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/** @type {import('tailwindcss').Config} */ module.exports = { content: [ <- この箇所を追加 "./components/**/*.{js,vue,ts}", "./layouts/**/*.vue", "./pages/**/*.vue", "./plugins/**/*.{js,ts}", "./app.vue", "./error.vue", ], theme: { extend: {}, }, plugins: [], }; |
TailwindディレクティブをCSSに追加
Nuxt.jsの場合は、「./assets/css/main.css」が既に存在していると思うので、main.cssにTailwindディレクティブを追加します。
|
1 2 3 |
@tailwind base; @tailwind components; @tailwind utilities; |
ここでのCSS statementsは、At-rules を採用しています。
At-rules are CSS statements that instruct CSS how to behave.…
他にも「@tailwind variants;」や「@layer」ディレクティブも追加することができます。詳細は公式HPを参考にしてみてください。
A reference for the custom functions and directives Tailwind…
CSSファイルをnuxt.config.tsに追加
nuxt.config.tsのグローバルに先ほど定義した「main.css」を追加し、Nuxtに認識させます。
|
1 2 3 4 5 6 7 8 9 10 |
// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ css: ["~/assets/css/main.css"], <- この箇所を追加 postcss: { plugins: { tailwindcss: {}, autoprefixer: {}, }, }, }); |
Tailwind CSSを使ったVueファイルの実装例
Tailwind CSSが終わり、ようやくVueファイルの中でTailwind CSSが使えるようになりました。簡単な実装例ですが、以下のように書くことができます。
|
1 2 3 4 5 6 7 |
<script lang="ts" setup></script> <template> <section class="border border-blue-500 m-2.5 p-4"> <h1 class="font-bold text-lg">コンポーネントの基礎</h1> <OneSection /> </section> </template> |
pnpm devで実行すると起動すると以下のような画面が出てきます！
最後に
Tailwind CSSは、学習コストが一般的なCSSを導入するより別途必要、可読性が下がる可能性があるなどのデメリットもありますが、ベタでCSSを書いてコード量を長くしたくない場合に導入するとデメリットを上回るメリットが得られると思います！
私も今後業務や個人的なプロジェクトでも積極的にTailwind CSSを導入していきたいと思っています！
