You’re very close! Here’s a step-by-step explanation and corrections to get your Google font working with Tailwind in your Vue 3, Inertia, Laravel, and Tailwind v4 stack.
1. Install the Font You already did this:
npm install @fontsource/hind-vadodara
2. Import the Font in Your CSS
Only import the font-source files, don’t use @config in your CSS file. The @config directive is for Tailwind v3+ and should generally be the very first statement in your CSS (if used at all), but it isn't needed unless your CSS is not located in the default place, or you have multiple configs. Most of the time, Tailwind automatically finds tailwind.config.js.
So, your /resources/css/app.css should look like:
@import '@fontsource/hind-vadodara/300.css';
@import '@fontsource/hind-vadodara/400.css';
@import '@fontsource/hind-vadodara/500.css';
@import '@fontsource/hind-vadodara/600.css';
@import '@fontsource/hind-vadodara/700.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
Don’t add the @config directive unless absolutely required, and if so, it must come before any @import.
3. Update Tailwind Config
Your tailwind.config.js should include 'Hind Vadodara' in the fontFamily configuration. Note: it should use straight quotes, not HTML entities:
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Hind Vadodara', ...defaultTheme.fontFamily.sans],
},
// ...other extensions
},
// If you're redefining colors, make sure to use the 'extend' key unless you want to fully override the default palette
colors: {
transparent: 'transparent',
current: 'currentColor',
black: '#000',
white: '#fff',
// ...your custom indigo
indigo: {
100: '#e6e8ff',
300: '#b2b7ff',
400: '#7886d7',
500: '#6574cd',
600: '#5661b3',
800: '#2f365f',
900: '#191e38',
}
},
},
// ...rest of config
}
Note:
When you directly set theme.colors, you replace all the built-in colors unless you spread the defaults or use extend.colors. If you want to keep all default colors and override only indigo, do this:
const colors = require('tailwindcss/colors');
module.exports = {
theme: {
extend: {
colors: {
indigo: {
100: '#e6e8ff',
300: '#b2b7ff',
400: '#7886d7',
500: '#6574cd',
600: '#5661b3',
800: '#2f365f',
900: '#191e38',
}
}
},
fontFamily: {
sans: ['Hind Vadodara', ...defaultTheme.fontFamily.sans],
}
}
};
4. Rebuild Your CSS
After these changes, stop and restart your build/watch process to pick up on the config changes:
npm run dev
# or
npm run build
5. Double-Check Usage
If you want to force a specific element (like the body) to use your new font, add this in your app.css (optional, usually your tailwind config is sufficient):
body {
font-family: 'Hind Vadodara', Helvetica, Arial, Lucida, sans-serif;
}
Or use Tailwind’s class:
<body class="font-sans">
...
</body>
Summary Checklist
- Remove
@configfromapp.css(unless you really, really need it). - Import fontsource files at the top of your
app.css. - Update
fontFamilyin yourtailwind.config.js. - Use
extend.colorsif only customizing some colors. - Restart your build process.
Let me know if you need more troubleshooting steps! If you’re still not seeing the font, open DevTools > Computed Styles, inspect your font-family on a text element, and verify it’s applied.