🐒

Nuxt3 に Tailwind CSS をインストールしてみた

2021/12/10に公開

Nuxt

Tailwind CSS

tech

はじめに

表題の通り、Nuxt3 に Tailwind CSS をインストールしてみました。
かなり詰まったので、記事にしてみました。

ちょっと眠たい目を擦りながら書いたので、間違ってたらごめんなさい。
また後日見返します…

Nuxt3 の準備

前回の記事を参照してください。

Tailwind CSS のインストール

Tailwind の公式に Nuxt.js 導入手順があるので、とりあえず従ってみましょう。

インストール

$ npm install -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest

nuxt のビルド設定

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  nitro: {
    preset: 'node',
  },
  buildModules: ['@nuxtjs/tailwindcss'],
  css: ['@/assets/css/tailwind.css'], // <= ドキュメントからさらに追加
})

Tailwind のセットアップ

$ npx tailwindcss init

tailwind.config.js

module.exports = {
    purge: [
        './app.vue', // <= ドキュメントからさらに追加
        './components/**/*.{vue,js}',
        './layouts/**/*.vue',
        './pages/**/*.vue',
        './plugins/**/*.{js,ts}',
        './nuxt.config.{js,ts}',
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

./assets/css/tailwind.cssを作成

./assets/css/tailwind.css

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

Nuxt ビルド

$ npm run dev

あれ、エラー？

ERROR  Cannot restart nuxt:  Cannot read property 'resolveAlias' of undefined
  at Object.tailwindCSSModule (node_modules/@nuxtjs/tailwindcss/dist/index.js:51:36)
  at installModule (node_modules/@nuxt/kit/dist/index.mjs:1196:17)
  at initNuxt (node_modules/nuxt3/dist/index.mjs:817:11)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async load (node_modules/nuxi/dist/chunks/dev.mjs:6762:9)

調べてみると、Github issue にも上がっていますね。

まだクロージングされていませんが、どうやら postcss のビルド設定したらいけるみたいです。

Tailwind のセットアップ（再）

$ npx tailwindcss init -p

postcss.config.jsが作成されました。

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  nitro: {
    preset: 'node',
  },
  // buildModules: ['@nuxtjs/tailwindcss'], // <= コメントアウト
  css: ['@/assets/css/tailwind.css'],
  // ↓ 追加
  build: {
    postcss: {
      postcssOptions: require('./postcss.config.js'),
    }
  },
})

Nuxt ビルド（再）

$ npm run dev

ちょっとビルド時間が長くなりましたね…

終わり

いかがでしたでしょうか。
Nuxt3 x Tailwind のドキュメントが無い + issue も閉じられてない、で
かなり怪しい感はありますが、何とか動く形に持っていけました。

最後までご覧いただき、ありがとうございました。