我仍然非常處于使用 nuxt3 的新專案的開始階段。我安裝了 tailwindcss 以進行快速主題化和原型設計。我遵循了nuxt 3 的 tailwindcss 插件檔案中的基本設定。
問題是，沒有應用歡迎訊息的背景顏色（CSS 屬性也不會顯示在呈現的 HTML 上）。當我將 CSS 更改為這樣的：時，它就可以作業了。
我找不到任何類似的問題，但是我確信我不能成為第一個/唯一一個遇到這個問題的人。我很感激任何提示。
**編輯：** 問題是順風組態檔中的匯入語法。將匯入更改為require語法解決了這個問題。
我的代碼如下：
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,
}
})
tailwind.config.js
import defaultTheme from 'tailwindcss/defaultTheme'
export default {
theme: {
extend: {
colors: {
primary: defaultTheme.colors.green
}
}
}
}
app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
layouts/default.vue
<template>
<div>
<LayoutHeader/>
<slot />
<LayoutFooter/>
</div>
</template>
pages/index.vue
<template>
<div>
<div class="bg-primary">Welcome to the homepage</div>
</div>
</template>
uj5u.com熱心網友回復：
主要問題是這tailwind.config.css不是一個有效的組態檔，因為我們在這里使用 JS，因此為什么npx tailwindcss init推薦的方式是安全地生成組態檔（配置本身是一個 JS 檔案，而不是 CSS 檔案）。
我已經使用以下tailwind.config.js檔案成功安裝了它
const colors = require('tailwindcss/colors')
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./nuxt.config.{js,ts}",
],
theme: {
extend: {
colors: {
primary: colors.green
}
},
},
}
這是對檔案的參考：https ://tailwindcss.com/docs/customizing-colors#naming-your-colors
這是一個有效的github 存盤庫。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/524987.html
上一篇：在陣列中搜索數字-js
下一篇：如何關閉一個視窗