Скачать или смотреть How to Use Local Fonts in TailwindCSS 4 with a React Project

Steps :
1-commands to run :
npm create vite@latest ./

npm install @tailwindcss/vite tailwindcss

2-modify 'vite.config.js' :
"
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
plugins: [tailwindcss(), react()],
})
"

3-add this line in 'index.html' : (wrap in less than and greater than)
link href="/dist/styles.css" rel="stylesheet"

4-Put your local font in /public/fonts

5-Modify 'index.css' :
"
@import "tailwindcss";

@theme{
--font-primary:"yourFont"
}

@font-face {
font-family: "yourFont";
src: url("/fonts/nameOfYourFont.ttf") format(truetype);
}
"

6-Add this className to your h1 tag in src/App.jsx:
className="font-primary text-orange-500 text-5xl"

7-Save each file and run :
npm run dev

#tailwindcss #coding #tailwindcss4 #tailwind #react #reactjs