はじめに
nuxt3でtailwindcss（bootstrapのようなcssフレームワーク）を使えるようにします。nuxt3は、本記事掲載時点ではバージョンrc4となっており正式リリースはされてない状況ですが、少しずつ触っていきたいと思います。公式サイトのロードマップを見るとmidsummerとなっているのでもうすぐリリースでは！？と楽しみにしてます。
nuxtでは、tailwindcss向けのモジュールが提供されているので、モジュールを使うことで簡単に導入することができます。では、実際に入れて試してみたいと思います。
まずは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を含めて３つの方法が用意されています。
- tailwind.config.js
- nuxt.config.ts
- 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も使えます。カタログを見るような感じでコードの記述が捗ります。
いい感じに動いてそうですね。
参考リンク
- https://tailwindcss.nuxtjs.org/
- https://github.com/nuxt-community/tailwindcss-module
- https://tailwindcss.com/
コメント