[英]How to configure TailwindCSS in Nuxt3?
I'm trying to set the default font Proxima Nova
from TailwindCSS in my Nuxt3 project but am unfamiliar with the file structure.我正在尝试在我的 Nuxt3 项目中设置来自 TailwindCSS 的默认字体
Proxima Nova
,但我不熟悉文件结构。 I've installed the tailwindcss module
:我已经安装了
tailwindcss module
:
npm i -D @nuxtjs/tailwindcss
and added the module to nuxt.config.ts
:并将模块添加到
nuxt.config.ts
:
modules: [
'@nuxtjs/tailwindcss'
],
but how do I change the font-family
?但如何更改
font-family
? There is a nuxt
folder with tailwind.config.cjs
inside but it seems to be updated whenever the dev server
triggers a style update.里面有一个
nuxt
的tailwind.config.cjs
文件夹,但每当dev server
触发样式更新时,它似乎都会更新。 I've tried changing it but it changes back.我试过改变它,但它又变回来了。
When I create a tailwind.config.js
file in the root folder, it doesn't seem to be used by the project.当我在根文件夹中创建一个
tailwind.config.js
文件时,它似乎没有被项目使用。 I've tried:我试过了:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
},
},
};
Instead the browser shows that these fonts are applied by default:相反,浏览器显示默认应用这些字体:
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";I
When I create a
tailwind.config.js
file in the root folder, it doesn't seem to be used by the project.当我在根文件夹中创建一个
tailwind.config.js
文件时,它似乎没有被项目使用。
Have you specified configPath
in nuxt configuration file?您是否在 nuxt 配置文件中指定了
configPath
?
This works for me:这对我有用:
export default defineNuxtConfig({
modules: ["@nuxtjs/tailwindcss"],
tailwindcss: {
configPath: "~/tailwind.config.ts",
},
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.