Nuxt3 (vite)にVuetify3 ＆ TailwindCSSを導入するまでにやったこと

Vuetify3 と TailwindCSS の導入に必要なモジュールを追加します。

Nuxt3 で TailwindCSS を利用する分には全く問題ありませんでしたが、Storybook でTailwind を利用する場合には、TailwindCSSがPostCSS8を必要とするのに対して、StorybookはがデフォルトでPostCSS7で動いてる為、正しく動作しませんでした。

回避策として、TailwindCSS のバージョンを "tailwindcss": "npm:@tailwindcss/postcss7-compat" とすることで、Nuxt3 ・ Storybook で共に利用できるようになりました。

# Vuetify を導入する
yarn add vuetify@next @vuetify/vite-plugin @mdi/font

# TailwindCSS を導入する
yarn add tailwindcss @nuxtjs/tailwindcss @tailwindcss/postcss7-compat

Vuetify を利用するpluginsファイルを作成する

src/plugins/vuetify.ts

import { defineNuxtPlugin } from '#app'
import { createVuetify } from 'vuetify'

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

// Vuetify
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
    theme: {
      themes: {
        light: {
          colors: {
            primary: '#000d6d',
            background: '#fff',
            error: '#d63031',
            info: '#0984e3',
            secondary: '#EDF2F7',
            success: '#00cec9',
            surface: '#fff',
            warning: '#2d3436',
          },
          dark: false,
          variables: {},
        },
      },
    },
  })
  nuxtApp.vueApp.use(vuetify)
})

TailwindCSS を利用する設定をする

nuxt.config.ts

const nuxtConfig = defineNuxtConfig({

  ・・・
	css: ['~/assets/sass/app.scss'],
	buildModules: ['@nuxtjs/tailwindcss'],

})

src/assets/sass/app.scss

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

Storybook からもVuetify3 ＆ TailwindCSSを利用できるようにする

tailwind.config.js

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

.storybook/main.js

const path = require('path')
const vuetify = require('@vuetify/vite-plugin')

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  staticDirs: ['../src/public'],
  framework: '@storybook/vue3',
  core: {
    builder: 'storybook-builder-vite',
  },
  async viteFinal(config, { configType }) {
    config.resolve.alias['~storybook'] = path.resolve(__dirname)
    config.resolve.alias['@'] = path.resolve(__dirname, '..', 'src')
    config.plugins = [...config.plugins, vuetify()] // ← ここに vuetyfy() を追加

    return config
  },
}

.storybook/preview.js

import { app } from '@storybook/vue3'
import { createVuetify } from 'vuetify'

// Vuetify
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
  components,
  directives,
  theme: {
    themes: {
      light: {
        colors: {
          primary: '#000d6d',
          background: '#fff',
          error: '#d63031',
          info: '#0984e3',
          secondary: '#EDF2F7',
          success: '#00cec9',
          surface: '#fff',
          warning: '#2d3436',
        },
        dark: false,
        variables: {},
      },
    },
  },
})
app.use(vuetify)

import '@/assets/sass/app.scss'

export const decorators = [
  (story) => ({
    components: { story },
    template: '<v-app><story /></v-app>',
  }),
]

【最速】Nuxt3 を検証！ボイラープレートを作りました