Nuxt3项目中TailwindCSS配置不生效问题及解决

问题描述 #

用Nuxt3搭建新项目，严格按照官方文档配置了TailwindCSS做主题开发和原型制作。首页欢迎消息的bg-primary背景色完全不生效——渲染后的HTML里找不到对应的CSS属性，但换成class="bg-green-200"这类原生Tailwind类名时，样式正常生效。

解决方法 #

问题根源出在tailwind.config.js的导入语法上，把ES Module的import改成CommonJS的require语法即可：

修改前的tailwind.config.js #

import defaultTheme from 'tailwindcss/defaultTheme'

export default {
  theme: {
    extend: {
      colors: {
        primary: defaultTheme.colors.green
      }
    }
  }
}

修改后的tailwind.config.js #

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: defaultTheme.colors.green
      }
    }
  }
}

相关配置参考 #

nuxt.config.js #

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/robots',
    '@nuxtjs/color-mode',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/i18n',
  ],
  i18n: {
    locales: [
      {
        code: 'de', name: 'Deutsch', iso: 'en-US', file: 'de.js'
      },
      {
        code: 'en', name: 'English', iso: 'de-CH', file: 'en.js'
      },
    ],
    defaultLocale: 'de',
    strategy: 'prefix_except_default',
    langDir: 'languages',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root',  // recommended
    },
  },
  buildModules: [],
  robots: {},
  tailwindcss: {
    configPath: 'tailwind.config.js',
    exposeConfig: false,
    injectPosition: 0,
  }
})

pages/index.vue #

<template>
  <div>
    <div class="bg-primary">Welcome to the homepage</div>
  </div>
</template>

app.vue #

<template>
    <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

layouts/default.vue #

<template>
  <div>
    <LayoutHeader/>
    <slot />
    <LayoutFooter/>
  </div>
</template>

内容的提问来源于stack exchange，提问作者Claudio Brasser