Reputation: 91
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!
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: {},
},
}
Upvotes: 1
Views: 5251
Answers (3)
Reputation: 8118
Update for TailwindCSS v4
In tailwind Version-4, we do not need to use tailwind.config.js configurations. I faced the issues in my current React-Vite project. The process is simpler now:
After importing your font in index.css file (keeping it on the top), just add this line of code:
@theme {
--font-inter: 'Inter', 'sans-serif';
}
I am using Inter font, you can replace with your own font.
And for those who are unaware about the new changes to be made in vite.config.js for tailwind-4 to work with vite. Here are the updates:
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [tailwindcss(), react()]
})
For the complete tailwind-4 with Vite apps update: Check TailwindCSS v4 with Vite on here on StackOverflow.
Upvotes: 0
Reputation: 8118
I was having issues while setting google fonts in my project as well.
I want to share the complete steps, so that anyone who wishes to go with a step by step solution can find it useful.
I did the following steps from the very start:
A) Followed the official document for setting up Tailwind with React Vite
Here, I noticed that it automatically generated tailwind.config.js, vite.config.js and postcss.config.js with some pre-generated code.
I didn't touched vite.config.js and postcss.config.js at all as per the docs.
Then setup the tailwind.config.js file. Again from the document by basically copy/pasting code from the docs.
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
fontFamily: {
roboto: ["Roboto", "sans-serif"],
},
},
},
plugins: [],
};
B) Then copy the font from official google fonts website. In my case I was using Roboto font.
Then in the index.css file import the font on the top along with tailwind imports. (This is also mentioned in the document, however we have to place our fonts import at the very top for it to work).
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
D) Then finally, we need to restart our React App for these changes to reflect.
npm run dev
And the font-family finally applies successfully in the React Vite Project.
Upvotes: 2
Reputation: 91
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.
Upvotes: 0