导入字体后 Tailwind CSS 不起作用 [已关闭]-解网

问：

编辑问题以包括所需的行为、特定问题或错误以及重现问题所需的最短代码。这将帮助其他人回答这个问题。

5天前关闭。

改进此问题

我正在开发一个下一个.js项目并使用顺风。当我将自定义字体导入全局 .css 时，有一个奇怪的行为

页面.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: [],
};

全局.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;

这是我导入字体时与不导入字体时的样子

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

CSS Next.js 背景 Tailwind-CSS

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: [],
}

导入字体后 Tailwind CSS 不起作用 [已关闭]

tailwind css not working after importing font [closed]

评论

评论