Google 字体无法在 React Vite 中使用 tailwind CSS 工作

Question

我正在用头撞墙。我的项目是在 React 中配置的 Vite 和 tailwind CSS。现在我想在 tailwind CSS 中使用 Google 字体。由于某种原因它不起作用。所有教程似乎都让我认为它应该很容易，所以我猜我的问题很容易由有经验的人解决。预先感谢！

index.css

@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');

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

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        inter: ["Inter", "sans-serif"],
      }
    },
  },
  plugins: [],
}

index.html

<!doctype html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.tailwindcss.com"></script>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from 'tailwindcss'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  }
})

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Answer 1

我的问题是我正在使用react-swc。我不知道为什么它不起作用。但我可以使用非 SWC 版本正确配置 Tailwind。

Google 字体无法在 React Vite 中使用 tailwind CSS 工作

问题描述投票：0回答：1

1个回答

最新问题

Google 字体无法在 React Vite 中使用 tailwind CSS 工作

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1