Tailwind CSS类在HTML文件中不生效，字体类无法呈现预期样式问题求助

Hey there, let's get those font styles working properly! The root cause here is Tailwind CSS v3's default JIT (Just-In-Time) compilation mode—it only generates CSS for classes it detects in your project files, and right now your config isn't telling it to scan your HTML.

Step 1: Update Your tailwind.config.js Content Path #

Your current tailwind.config.js has an empty content array, which means Tailwind isn't looking at your index.html (where you're using font-sans, font-serif, etc.). Update the config to include your HTML file path:

module.exports = {
  // Add your HTML file path here—this tells Tailwind to scan it for used classes
  content: ["./index.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

If you have multiple HTML files in subfolders later, you can use a wildcard pattern like "./**/*.html" to scan all HTML files recursively.

Step 2: Rebuild Your CSS #

Since you changed the config, you need to regenerate your CSS file to include the font classes. Run the build command from your package.json:

npm run build-css

Step 3: Verify the Fix #

Refresh your browser, and you should now see:

• font-sans using Tailwind's default sans-serif stack
• font-serif using the default serif stack
• font-mono using the default monospace stack

Why This Happened #

Tailwind v3 switched to JIT by default to keep CSS files small. Without specifying content paths, Tailwind has no way to know which classes you're actually using—so it only includes a minimal set of styles (like the default font), not the font variant classes you added.

内容的提问来源于stack exchange，提问作者Varun Prasannan