Nuxt3でtailwindcssを使う

code on a screen NuxtJS
Photo by Markus Spiske on Pexels.com
この記事は約4分で読めます。

はじめに

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

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

Add Tailwind CSS to your Nuxt Applications.
Welcome to Nuxt UI Pro documentation template.

まずはNuxt3を入れる

公式の通りです。

@nuxtjs/tailwindcssの導入

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

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

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

tailwindcssのconfiguration

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

  1. tailwind.config.js
  2. nuxt.config.ts
  3. nuxt hook

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

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

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

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

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

動かしてみる

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

app.vue

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

pages/index.vue

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

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

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

http://localhost:3000/_tailwind/

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

参考リンク

コメント

タイトルとURLをコピーしました