wonder95 wrote a reply+100 XP
3mos ago
OK, so that's all pretty much what I have in place.
@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';
@import 'tailwindcss';
@plugin "@tailwindcss/typography";
Here is my entire tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],
theme: {
extend: {
borderColor: theme => ({
DEFAULT: theme('colors.gray.200', 'currentColor'),
}),
fontFamily: {
sans: ['Hind Vadodara', ...defaultTheme.fontFamily.sans],
},
boxShadow: theme => ({
outline: '0 0 0 2px ' + theme('colors.indigo.500'),
}),
colors: {
indigo: {
100: '#e6e8ff',
300: '#b2b7ff',
400: '#7886d7',
500: '#6574cd',
600: '#5661b3',
800: '#2f365f',
900: '#191e38',
},
},
fill: theme => theme('colors'),
},
},
variants: {
extend: {
fill: ['focus', 'group-hover'],
},
},
plugins: [
require('@tailwindcss/forms')
],
};
and FWIW, this is my <body> tag in app.blade.php:
<body class="font-sans antialiased">
@inertia
</body>
But i'm still not getting my font to be used.
wonder95 started a new conversation+100 XP
3mos ago
In my Vue3/Interia/Laravel/Tailwind v4 app, I need to make some modifications to match another site, and part of that is implementing the Hind Vadadora font. In order to make it more performant, my idea was to import the font and just run it locally, so I installed it via NPM
npm install @fontsource/hind/vadadora
added these lines to /resources/css/app.css
@config "../../tailwind.config.js";
@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';
and updated fontFamily in tailwind.config.js from this:
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
to this
fontFamily: {
sans: ['"Hind Vadodara"', 'Helvetica', 'Arial', 'Lucida', 'sans-serif'],
},
I also had to remove this lines from app.blade.php
<link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">
Because that was overriding with the Nunito font. However, it seems that my config file wasn't even being read, because nothing changed. I added this to app.css
@config "../../tailwind.config.js";
@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';
and apparently that broke something, because I then lost my bg-indigo-*00 colors defined in the tailwind config
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
red: colors.red,
orange: colors.orange,
yellow: colors.yellow,
green: colors.green,
gray: colors.blueGray,
indigo: {
100: '#e6e8ff',
300: '#b2b7ff',
400: '#7886d7',
500: '#6574cd',
600: '#5661b3',
800: '#2f365f',
900: '#191e38',
},
},
So my question is, what do I need to do to get my installed Google font to work?
wonder95 started a new conversation+100 XP
3mos ago
I have been using Breeze with Vue and Inertia and Tailwind since Laravel 10, and it's been pretty flawless. However, the Laravel 12 installation has been somewhat painful, and one issue that stands out is casing of directory names vs values returned from controllers via Inertia.render().
One change has been the casing of the directory names under /resources/js. Where in the past, it was
resources/js/Pages/Auth
for example, it is now
resources/js/pages/auth
At the same time, the Vue component names are still upper case (e..g. login.vue). So, once I have everything installed and running, when I go to the Log In link, I get this console error
Uncaught (in promise) Error: Page not found: ./Pages/Auth/Login.vue
The resolve item in app.js
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
can be changed to
resolve: (name) => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob('./pages/**/*.vue')),
but that still doesn't handle the subdirectory (/Auth/) casing. On top of that, the return values in the RegisteredUserController.php and AuthenticatedSessionController.php still return the upper case values
public function create(): Response
{
return Inertia::render('Auth/Register');
}
and
public function create(): Response
{
return Inertia::render('Auth/Login', [
'canResetPassword' => Route::has('password.request'),
'status' => session('status'),
]);
}
Instead of changing those, I changed my resolve to this, and it works, at least for those two
resolve: (name) => {
// 1. Split the name into parts (e.g., "Auth/Login" -> ["Auth", "Login"])
const parts = name.split('/');
// 2. Lowercase all directory parts, but keep the last part (the file) PascalCase
const transformedName = parts.map((part, index) => {
return index === parts.length - 1 ? part : part.toLowerCase();
}).join('/');
// 3. Resolve using the corrected path
return resolvePageComponent(
`./pages/${transformedName}.vue`,
import.meta.glob('./pages/**/*.vue')
);
},
However then I run into this again, in that when I navigate to the default Profile page, I get a similar error
Uncaught (in promise) Error: Page not found: ./pages/profile/Edit.vue
because the casing for /Profile/Partials is still upper case.
This seems like sort of a hot mess. Did I miss something, or are these things that need to be fixed?