For tailwind, sizes in px need to be in square brackets - does the following change fix it?

let fontSizeStyles = `text-[${fontSize}px]`;
let lineHeightStyles = `leading-[${lineHeight}px]`;
let letterSpacingStyles = `tracking-[${letterSpacing}px]`;

I found a part of the issue

When I had for example 'text-25' in the clsx of typo it made all typo at 25 px and when i delete it all it's working

The same problem

So it's maybe a problem of reloading or I don't know

The fact that deleting classes seems to fix the problem temporarily suggests there might be a caching issue or a problem with how your development environment is reloading changes.

Have you tried clearing your build cache and restarting your development server? If you're using Next.js, you can do this by running:

npm run dev -- -c

Or for Yarn:

yarn dev -c

If this doesn't help, can you create a minimal reproducible example (https://stackoverflow.com/help/minimal-reproducible-example) ? That would allow me to get the issue running here and debug farther...

import { withUt } from "uploadthing/tw"; // Importez le helper withUt

/ @type {import('tailwindcss').Config} */
export default withUt({
content: [
"./src//*.{js,ts,jsx,tsx,mdx}",
],
theme: {
fontSize: {
'16': '1rem', // Taille de police de 16px
'20': '1.25rem', // Exemple de taille supplémentaire
'24': '1.5rem',
'25': '1.5625rem',
'28': '1.75rem',
},
extend: {},
},
plugins: [],
});


import clsx from "clsx";

interface Props {
fontSize?: number;
className?: string;
children: React.ReactNode;
}

export const Typo = ({
fontSize = 16,
className = '',
children
}: Props) => {

let fontSizeStyles = text-${fontSize.toString()}; // Utilisation de classes arbitraires

return (
<p
className={clsx(
fontSizeStyles,
className,
)}
>
{children}
</p>
);
};

Yes I did clean the cache

If you can share a github repo of the minimal code required to replicate this problem, I can try running it locally and do more debugging 👍

Hello @Sloth bear do you have any example where you are calling Typo ?

Your Typo default props is fontSize = 16 so if you don't override it when you are using Typo it will be 16

Hello

Ok I will do it

I didn't put all properties because I do Minimal, Reproducible Example

But if you want the complete docs ask me

@Sloth bear Can you try something ?
I know tailwind do not like built-in classes 😦

Can you try to update your fontSize props and give the tailwind class like 'text-16', 'text-25' ...
instead of built it in your Typo component

It should solve the issue

Ok thx

Let me know if thats working

@Sloth bear any update ?

I don't try because it like putting directlty the fontSize in the className

And I have to make it for all font... and letterSpace and ..

So I have to update the all, and I don't want

I am blocked

I guess you have no choice to change it everywhere :/
Tailwind do not recommand to do it and its poorly supported

ok

Because dynamic classes tailwind do not know whats used and it cannot import it in final minify css

You can change your Typo then!

If fontSize=25

I will make a switch case

for all

You give the class text-25 but static

You speak french ?

Oui

Explique moi en francais stp 😂

Parce que jles ai mis dans la config tailwind

Donc je comprend pas

Ce que tu peux faire c’est pour 25

Tu peux donner directement « text-25 » au lieu de faire text-fontsize

Avec un swicth case ?

Oui ça devrait marcher, c’est ce que je fais de mon côté

Ok

Enfaite normalement faudrait definir un nombre limités de police pour pouvoir utiliser des noms de props genre small tout ca mais le figma qu'on ma fait ya pas ca

J’ai un composant Typo avec des variants « title1, 2, 3… subtitle, content » et ce que je fais c’est que je donne les classes tailwind qui correspondent

Oausi cest ca exactment

Mais moi jai toutes les typos qui sont differente donc bon

Je me susi dit jvais retranscrire les porps figma dans react

C’est plus simple pour gérer tes typos et tu limites les cas qui correspondent pas à tes maquettes

Exactement

Pas grave pour la prochaine fois

T’as un DS?

C quoi ?

Design system

Non cest ca la galere 😂

😭😭😭

Je redfeinit tout a la main

Force

En vrai ca faisait longtemps javais pas te react donc ca ma permis de consolider ca

Tu peux faire ce travail de ton côté après avec les différents trucs que tu trouves sur figma et après tu donnes le truc à tes designers

Comment ca ?

De ton côté tu fais les différents composants Typo
title1, title2, subtitle, content, caption… qui vaut certaines valeurs

Et après tu demandes à tes designers de se baser là dessus

Pour que ton site reste uniforme

Et ça sera mieux pour toi tu verras un variant=« title1 »

Au lieu de fontSize=25 spaceing=20 etc…

Normalement cest leur taff non ?

Oui et non, un design system c’est un moyen de communication entre dev et designer!

Logiquement, oui c’est à eux de le faire. Cependant, rien ne t’empêche de prendre des initiatives!

Ou sinon, tu peux leur demander de faire ce travail d’alignement

Ok merci !

Je t’en prie!

Je te laisse fermer ce thread 😉