Nuxt2+Buefy環境にTailwind3+nuxt-tailwindを導入する

Nuxt2+Buefyで開発していたけど、BuefyがVue3をサポートしないっぽい。。
なので、移行先としてTailsind CSSを考えている。

いきなり全部の移行は難しいので、BuefyとTailwind3が同居できる環境を整える。

Nuxt3では試してみたけど、Nuxt2+Buefyだとちょっと癖があった(*´ω｀*)

www.memory-lovers.blog

Nuxt Tailwindのインストール

Tailwind用のNuxtモジュールがあるので、そちらを使う。

• Nuxt Tailwind

v5.3.1で、5系でもNuxt2に対応されたので、
v5.3.1移行を使うようにする。

$ npm i -D @nuxtjs/tailwindcss

Nuxt3ではmodulesに追加するが、Nuxt2ではbuildModulesに追加するよう。

import { NuxtConfig } from "@nuxt/types";
const config: NuxtConfig = {
  buildModules: [
    // Docs: https://tailwindcss.nuxtjs.org
    "@nuxtjs/tailwindcss"
  ]
};

export default config;

v5.3.1移行では、postcss-nestedや@tailwindcss/nestingがデフォルトで有効になってるので便利(´ω｀)

tailwind.config.jsの設定

$ npx tailwindcss init

/** @type {import('tailwindcss').Config} */
module.exports = {
  // プレフィックスに`tw-`をつける
  prefix: "tw-",
  // tailwindのnormalizeを無効化
  corePlugins: {
    preflight: false,
  }
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

クラス名がかぶらないようにprefixを付与。
preflightと呼ばれるnormalizeが含まれるけど、Buefyとかぶるので無効化。

assets/css/tailwind.cssの追加

/* ~/assets/css/base.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ~/assets/css/tailwind.css */
@import "~assets/css/base";

base.cssにtailwindの初期設定ファイルを配置。
読み込まれる起点のtailwind.cssからインポートする形にしておく。

$variable-columnsの無効化

bulmaの一部のCSSでpostcssが処理できない部分があるっぽい。

• Columns gap | Bulma: Free, open source, and modern CSS framework based on Flexbox
• nuxt.js - Unable to build Nuxt due to a problem with PostCSS when using Bulma and Buefy (nuxt-buefy) - Stack Overflow
• Problem with columnGap property · Issue #1190 · jgthms/bulma

方法は2つあって、

• Bulma側の$variable-columnsを無効化するか
• postcss-custom-propertiesプラグインを無効化する

$variable-columnsの無効化

こちらはbulmaを読み込む前に、$variable-columns: false;を追加すればOK

// Disable $variable-columns
$variable-columns: false;

// Import bulma styles
@import "~bulma";

// Import buefy styles
@import "~buefy/src/scss/buefy";

• Columns gap | Bulma: Free, open source, and modern CSS framework based on Flexbox

postcss-custom-propertiesの無効化

こちらはnuxt.config.tsに以下を追加して無効化する。

// nuxt.config.ts
  build: {
    postcss: {
      plugins: {
        "postcss-custom-properties": false
      },
    },
  }

地味にハマる。。(´・ω・｀)

おまけ: 設定ファイルのパスを変更する

各種設定ファイルの場所は以下のような感じで変更できる。
・Setup | Nuxt Tailwind

import { NuxtConfig } from "@nuxt/types";
const config: NuxtConfig = {
  // Tailwind CSS module configuration: https://tailwindcss.nuxtjs.org/tailwind/config
  tailwindcss: {
    configPath: "~~/tailwind.config.js",
    cssPath: "~/assets/css/tailwind.css"
  }
};

export default config;

以上! これで移行の下準備が整った感じ(*´ω｀*)

参考にしたサイト様

• Nuxt3 x Tailwindでの立ち上げを楽にする(daisyUI/Headless UI) - くらげになりたい。