Nuxt3でtailwindcssを使う | デバッグライフ

はじめに
まずはNuxt3を入れる
@nuxtjs/tailwindcssの導入
tailwindcssのconfiguration
動かしてみる
1. app.vue
2. pages/index.vue
参考リンク

はじめに

nuxt3でtailwindcss（bootstrapのようなcssフレームワーク）を使えるようにします。nuxt3は、本記事掲載時点ではバージョンrc4となっており正式リリースはされてない状況ですが、少しずつ触っていきたいと思います。公式サイトのロードマップを見るとmidsummerとなっているのでもうすぐリリースでは！？と楽しみにしてます。

nuxtでは、tailwindcss向けのモジュールが提供されているので、モジュールを使うことで簡単に導入することができます。では、実際に入れて試してみたいと思います。

Tailwind CSS for Nuxt

Add Tailwind CSS to your Nuxt Applications.

まずはNuxt3を入れる

公式の通りです。

npx nuxi init nuxt-app
cd nuxt-app
npm i

@nuxtjs/tailwindcssの導入

続いてtailwindcssを入れます。@nuxtjs/tailwindcssモジュールを入れます。

npm install -D @nuxtjs/tailwindcss

@nuxtjs/tailwindcssは、すでにnuxt3対応されています。続いて、nuxt.config.tsにモジュールを使用する指定を追加します。

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss"], // モジュールの使用
});

これで基本的には動作するようになります。

tailwindcssのconfiguration

@nuxtjs/tailwindcssではモジュール起動時にデフォルトの設定を適用するようになっているため、設定ファイルを用意しなくともすぐに使えるようになっています。tailwindcssでは、通常tailwind.config.jsというconfigurationファイルで設定を記述するようになっています。@nuxtjs/tailwindcssでは、configurationの記述場所としてtailwind.config.jsを含めて３つの方法が用意されています。

tailwind.config.js
nuxt.config.ts
nuxt hook

参考：https://tailwindcss.nuxtjs.org/tailwind/config

今回は、tailwindcssの通常である1の方法で設定を上書きしてみます。

設定を変更したい場合は、設定ファイルをプロジェクトトップに置きます。（なお、この場所は変更可能となっているようです）。以下のコマンドでtailwind.config.jsの雛形が生成されます。

npx tailwindcss init

今回は、tailwindcssのcss定義にtw-というプリフィックスをつけるよう設定してみましょう。ここでは、prefixのみを指定していますが、本設定は@nuxtjs/tailwindcssが用意するデフォルト定義にマージされます。マージ動作については、上記のconfig説明ページに書かれていますが、defuライブラリが使われています。

/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: "tw-",
};

これで、tailwindcssを使う準備ができました。

動かしてみる

では、実際に使ってみましょう。サンプルアプリは以下の構造です。

$ tree -L 1
.
├── README.md
├── app.vue
├── node_modules
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── pages
├── tailwind.config.js
└── tsconfig.json

2 directories, 7 files

app.vue

pagesのファイルを表示するようにしています。

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

pages/index.vue

ただのHello Worldを表示するだけのページです。tw-でプリフィックスをつけてます。

<template>
  <div class="tw-w-48">
    <div
      class="tw-text-white tw-text-center tw-bg-clip-border tw-p-6 tw-bg-violet-600 tw-border-4 tw-border-violet-300 tw-border-dashed"
    >
      Hello World
    </div>
  </div>
</template>

npm run devすると以下のようなページが表示され、cssが効いていることを確認できます。

また、開発モードでnuxi devで動かしている場合は、tailwind viewerも使えます。カタログを見るような感じでコードの記述が捗ります。

http://localhost:3000/_tailwind/

いい感じに動いてそうですね。