くらげになりたい。

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

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

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

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

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

www.memory-lovers.blog

Nuxt Tailwindのインストール

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

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が処理できない部分があるっぽい。

方法は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";
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;

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

参考にしたサイト様