Nuxt2+Buefyで開発していたけど、BuefyがVue3をサポートしないっぽい。。
なので、移行先としてTailsind CSSを考えている。
いきなり全部の移行は難しいので、BuefyとTailwind3が同居できる環境を整える。
Nuxt3では試してみたけど、Nuxt2+Buefyだとちょっと癖があった(*´ω`*)
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が処理できない部分があるっぽい。
- 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";
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;
以上! これで移行の下準備が整った感じ(*´ω`*)