next.js 导入字体后顺风css不工作[关闭]

oewdyzsn 于 2023-11-18 发布在其他

关注(0)|答案(1)|浏览(86)

**已关闭。**此问题需要debugging details。目前不接受回答。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答问题。
2天前关闭。
Improve this question的
我正在做一个next.js项目，使用tailwind。当我将自定义字体导入globals.css时，有一个奇怪的行为

page.jsx

"use client";

import React from "react";

const page = () => {
  return (
    <div className=" w-full  h-screen flex flex-col justify-center items-center bg-cover bg-center  bg-sliding-image  ">
      <div className={`flex flex-col items-center border `}>
        <h1 className="font-greatvibes text-black">The Wedding Of</h1>
      </div>
    </div>
  );
};

export default page;

字符串

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
        "sliding-image": "url('../assets/images/slidingimage.jpg')",
      },

      fontFamily: {
        satoshi: ["Satoshi", "sans-serif"],
        inter: ["Inter", "sans-serif"],
        abhaya: ["Abhaya Libre", "serif"],
        cormorant: ["Cormorant", "serif"],
        greatvibes: ["Great Vibes", "cursive"],
        roboto: ["Roboto", "sans-serif"],
      },
      colors: {
        "primary-orange": "#FF5722",
      },
      transitionDuration: {
        0: "0ms",
        3000: "3000ms",
      },
    },
  },
  plugins: [],
};

型

globals.css

@import url("https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600&family=Cormorant:wght@400;500;600&family=Great+Vibes&family=Roboto:wght@400;500;700&display=swap");

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

型
这里是什么样子，当我导入字体vs当我不导入它

你知道这是怎么发生的吗？我甚至不认为这是有意义的。

next.js

来源：https://stackoverflow.com/questions/77479245/tailwind-css-not-working-after-importing-font

1条答案

按热度按时间

2cmtqfgy1#

请尝试以“nextjs方式”导入字体，参见文档：https://nextjs.org/docs/app/building-your-application/optimizing/fonts#with-tailwind-css
您可以在布局中添加.jsx（替换为您选择的字体）：

import { Inter, Roboto_Mono } from 'next/font/google'
 
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})
 
const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})
 
export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>{children}</body>
    </html>
  )
}

字符串
在tailwind.config.js中：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        mono: ['var(--font-roboto-mono)'],
      },
    },
  },
  plugins: [],
}

型

赞(0）回复(0）举报 2023-11-18

我来回答

next.js 导入字体后顺风css不工作[关闭]

1条答案

相关问题

热门标签

最新问答