Search code examples
reactjstailwind-cssvitegoogle-font-api

Google fonts not working using tailwind CSS in React Vite

I'm banging my head against the wall. My project is in React with Vite and tailwind CSS configured. Now I want to use Google fonts in tailwind CSS. It doesn't work for some reason. All the tutorials seem to make me think it should be easy, so I'm guessing my problem is somewhere very easy to fix with someone experienced. Thanks in advance!

enter image description here

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: {},
  },
}
Solution

  • My problem was that I was using react-swc. I don't know why it doesn't work. But I'm able to configure tailwind correctly with non swc version just fine.