くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Nuxt.js > Nuxt3 x Tailwindでの立ち上げを楽にする(daisyUI/Headless UI)

Nuxt3 x Tailwindでの立ち上げを楽にする(daisyUI/Headless UI)

Nuxt.js Tailwind

いままでNuxt x Buefy(Bulma)で開発をしていたけど、
いろんなつらみが出てきた。。

なので、Nuxt3 x Tailwindでいい感じにできないか、
調査してみたときの備忘録。

いろんなつらみ

  • 用意されているもの以外のカスタマイズがつらい
  • Bulmaとnuxt/contentsなどの相性が悪い

最初の立ち上げは早いけど、独自色を出そうとすると、
大変になりがち。。

Tailwindを試してみた所感

部分的にTailwindを使ってみる、
Buefy + Tailwindは割と良い感じだった。

このままうまく置き換えられないかなと試してみたけど、
ボタンやリンクも1からスタイルを決めていかないといけないので、
Tailwindは割とつらい。。

また、CSSだけなので、汎用的なJavaScript部分も、
自前で用意しないといけない。。

プラグインをつかうとうまくいきそうっぽい

いくつかTailwindベースのUIパーツやプラグインを見ていて、
以下を使うと、だいぶ楽になりそう。

これで、汎用的なUIパーツのスタイルと動作を、
１から作らなくても良くなる(*´ω｀*)

また、daisyUI自体が、いくつかThemeを用意してくれているので、
選ぶだけで見た目を変えられるように(*´ω｀*)

Nuxt3 x Tailwindの環境構築

以下からNuxt3での環境構築メモ。

Nuxt3の初期化

・Nuxt 3 - Quick Start

$ npx nuxi init nuxt3-app

Tailwindのインストール

・Introduction - Nuxt Tailwind CSS

インストール

まずはインストール

$ npm install --save-dev @nuxtjs/tailwindcss
nuxt.config.tsに設定を追加
import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: [
    // Docs: https://tailwindcss.nuxtjs.org
    "@nuxtjs/tailwindcss",
  ],
});

tailwind.config.jsを作成

$ npx tailwindcss init
module.exports = {
  // content: [],
  // theme: {
  //   extend: {},
  // },
  plugins: [
  ],
};

nuxt/tailindモジュールにある定義をtailwind.config.jsで上書きする形になる。
・Tailwind Config - Nuxt Tailwind CSS

assets/css/tailwind.cssを追加

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  width: 100vw;
  min-height: 100vh;
}

daisyUI

・daisyUI — Tailwind CSS Components

また、公式プラグインの@tailwindcss/typographyの使用を
強くおすすめされているので一緒に追加する。
・Layout and Typography — Tailwind CSS Components

$ npm i -D daisyui @tailwindcss/typography

tailwind.config.jsに設定を追加。
daisyUIのほうがあとにしないといけない。

module.exports = {
  //...
  plugins: [
    // Docs: https://tailwindcss.com/docs/typography-plugin
    require("@tailwindcss/typography"),
    // Docs: https://daisyui.com/docs
    require("daisyui"),
  ],
}

daisyUI自体にThemeが用意されていて、
htmlタグで設定できる。

<html data-theme="cupcake"></html>

・daisyUI themes — Tailwind CSS Components

Nuxt3では、nuxt.config.tsで設定。

export default defineNuxtConfig({
  app: {
    head: {
      htmlAttrs: {
        "data-theme": "cupcake",
      },
    },
  },
});

Headless UI

・ Headless UI - Unstyled, fully accessible UI components

Headless UIはVue3しかサポートしてないので注意

$ npm install @headlessui/vue

オプション: Tailwindの公式プラグイン

他にも便利なプラグインが公式から出ているので、
必要に応じて使う。

・Plugins - Tailwind CSS

$ npm i -D @tailwindcss/forms
$ npm i -D @tailwindcss/line-clamp
$ npm i -D @tailwindcss/aspect-ratio
module.exports = {
  //...
  plugins: [
    // Docs: https://github.com/tailwindlabs/tailwindcss-forms
    require("@tailwindcss/forms"),
  　// Docs: https://github.com/tailwindlabs/tailwindcss-aspect-ratio
    require("@tailwindcss/line-clamp"),
    // Docs: https://github.com/tailwindlabs/tailwindcss-line-clamp
    require("@tailwindcss/aspect-ratio"),
  ],
}

以上!!これでTailwindでも開発が楽になるはず(*´ω｀*)

参考にしたサイトさま