くらげになりたい。

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

トップ > Nuxt.js > Nuxt BridgeにTailwindCSSを入れる

Nuxt BridgeにTailwindCSSを入れる

Nuxt.js Nuxt-Bridge Tailwind

Nuxt BridgeのアプリにNuxt Tailwindを入れようとしたら、
Bridgeはサポートされてないっぽかった。。

なので、Tailwindを追加できるようにしたときの備忘録(*´ω｀*)

インストール

Tailwind側のドキュメントを参考にインストール

$ npm i -D tailwindcss postcss autoprefixer postcss-import

tailwind.config.js

Tailwind側のconfig.jsの設定。
Buefyが入っているので、
prefixやpreflightの設定も追加しておく。

$ npx tailwindcss init

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/components/**/*.{js,vue,ts}",
    "./app/layouts/**/*.vue",
    "./app/pages/**/*.vue",
    "./app/plugins/**/*.{js,ts}",
    "./app/app.vue",
    "./app/error.vue",
  ],
  prefix: "tw-",
  corePlugins: {
    preflight: false,
  },
}

contentの設定は、Nuxt Tailwind側の設定を参考に

tailwind.css

こちらもドキュメントを参考に用意

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

nuxt.config.ts

最後にnuxt.config.tsに設定を追加

ハマったのはここで、
build.postcss配下じゃないとうまく動いてくれない。。

import { defineNuxtConfig } from '@nuxt/bridge';
export default defineNuxtConfig({
  bridge: {
    vite: false,
    nitro: false,
    typescript: true,
  },
  srcDir: "app",
  // tailwind.cssを読み込む
  css: ["~/assets/css/tailwind.css"],
  
  // postcssの設定
  build: {
    // ここで指定
    postcss: {
      plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': {},
        tailwindcss: {},
        autoprefixer: {},
      },
    },
  },
  // こっちだと効かない
  postcss: {
    plugins: {
      'postcss-import': {},
      'tailwindcss/nesting': {},
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

tailwindcss/nestingも使いたいので、これも追加

以上!!　これでBridgeでもTailwindが使えるように(*´ω｀*)

参考にしたサイト様