如何在 Nuxt3 中配置 TailwindCSS？答案

【问题标题】：How to configure TailwindCSS in Nuxt3?如何在 Nuxt3 中配置 TailwindCSS？
【发布时间】：2022-12-20 20:08:45
【问题描述】：

我正在尝试在我的 Nuxt3 项目中从 TailwindCSS 设置默认字体 Proxima Nova，但我不熟悉文件结构。我已经安装了tailwindcss module：

npm i -D @nuxtjs/tailwindcss

并将模块添加到nuxt.config.ts：

modules: [
    '@nuxtjs/tailwindcss'
],

但是如何更改font-family？有一个 nuxt 文件夹，里面有 tailwind.config.cjs，但只要 dev server 触发样式更新，它似乎就会更新。我试过改变它，但它又变回来了。

当我在根文件夹中创建一个tailwind.config.js 文件时，它似乎没有被项目使用。我试过了：

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },
};

相反，浏览器显示默认应用这些字体：

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

【问题讨论】：

你的@font-face CSS 部分是什么？例如，shown here。
@kissu 我没有在 css 中设置任何 font-face。这在配置文件中是不可配置的吗？
你的 tailwind 配置和 CSS 文件是两个不同的东西。我不确定你是如何加载你的字体的，但我总是这样做like that，这对我来说似乎很正常并且工作正常。

标签： javascript vue.js nuxt.js tailwind-css nuxtjs3

【解决方案1】：

Blockquote 当我在根文件夹中创建一个tailwind.config.js 文件时，它似乎没有被项目使用。

你有没有在 nuxt 配置文件中指定configPath？

这对我有用：
export default defineNuxtConfig({
    modules: ["@nuxtjs/tailwindcss"],
    tailwindcss: {
        configPath: "~/tailwind.config.ts",
    },
})

【讨论】：