はじめに
nuxt3でtailwindcss（bootstrapのようなcssフレームワーク）を使えるようにします。nuxt3は、本記事掲載時点ではバージョンrc4となっており正式リリースはされてない状況ですが、少しずつ触っていきたいと思います。公式サイトのロードマップを見るとmidsummerとなっているのでもうすぐリリースでは！？と楽しみにしてます。
nuxtでは、tailwindcss向けのモジュールが提供されているので、モジュールを使うことで簡単に導入することができます。では、実際に入れて試してみたいと思います。
まずはNuxt3を入れる
公式の通りです。
|
1 2 3 |
npx nuxi init nuxt-app cd nuxt-app npm i |
@nuxtjs/tailwindcssの導入
続いてtailwindcssを入れます。@nuxtjs/tailwindcssモジュールを入れます。
|
1 |
npm install -D @nuxtjs/tailwindcss |
@nuxtjs/tailwindcssは、すでにnuxt3対応されています。続いて、nuxt.config.tsにモジュールを使用する指定を追加します。
|
1 2 3 4 5 6 |
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の雛形が生成されます。
|
1 |
npx tailwindcss init |
今回は、tailwindcssのcss定義にtw-というプリフィックスをつけるよう設定してみましょう。ここでは、prefixのみを指定していますが、本設定は@nuxtjs/tailwindcssが用意するデフォルト定義にマージされます。マージ動作については、上記のconfig説明ページに書かれていますが、defuライブラリが使われています。
|
1 2 3 4 |
/** @type {import('tailwindcss').Config} */ module.exports = { prefix: "tw-", }; |
これで、tailwindcssを使う準備ができました。
動かしてみる
では、実際に使ってみましょう。サンプルアプリは以下の構造です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$ 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のファイルを表示するようにしています。
|
1 2 3 4 5 6 7 |
<template> <div> <NuxtLayout> <NuxtPage /> </NuxtLayout> </div> </template> |
pages/index.vue
ただのHello Worldを表示するだけのページです。tw-でプリフィックスをつけてます。
|
1 2 3 4 5 6 7 8 9 |
<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も使えます。カタログを見るような感じでコードの記述が捗ります。
いい感じに動いてそうですね。
参考リンク
- https://tailwindcss.nuxtjs.org/
- https://github.com/nuxt-community/tailwindcss-module
- https://tailwindcss.com/
コメント