To add Fonts in Tailwind CSS, If it's your custom fonts it's a bit tedious, but not impossible so here is what you need to do. Put Those fonts in a certain folder like this

Preferabilly your public folder which you might have already setup in your project. Then in your input.css add those font like this

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-Black.ttf') format('truetype');
font-weight: 900;
}

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}

Here what I have done is used something called @font-face where you can give that font a name with font-family , show where the folder is with src in the format section write the full name of the extension of your font, in my case it was .ttf which when I did a quick google search found it's truetype. So I wrote that. Then you need to add font-weight and if it's an italic font then font-style. Once all weights from 100-900 are set up with their italic counterparts then your input.css will look something like this.

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-Black.ttf') format('truetype');
font-weight: 900;
}

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-ExtraBold.ttf') format('truetype');
font-weight: 800;
}

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-ExtraBold.ttf') format('truetype');
font-weight: 700;
}

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-ExtraBoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-Bold.ttf') format('truetype');
font-weight: 600;
}

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-BoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-Medium.ttf') format('truetype');
font-weight: 500;
}

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-Regular.ttf') format('truetype');
font-weight: 400;
}

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-Light.ttf') format('truetype');
font-weight: 300;
}

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-ExtraLight.ttf') format('truetype');
font-weight: 200;
}

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-ExtraLightItalic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
}

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-Thin.ttf') format('truetype');
font-weight: 100;
}

@font-face {
font-family: 'Jost';
src: url('/fonts/Jost/Jost-ThinItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}

Once you have these setup, go to your tailwind.config.js and in the themes extend section add Jost font in there like this

theme: {
    extend: {
        fontFamily: {
            jost:'Jost'
        }
    },
},

Here I named it Jost but you can name it things like primary as well.

theme: {
    extend: {
        fontFamily: {
            primary:'Jost'
        }
    },
},

Now call it where ever you want it to be called, in my case I want these Jost fonts in my paragraph texts so I called them

@font-face {
    font-family: 'Jost';
    src: url('/fonts/Jost/Jost-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

/* Like this */
p {
    @apply font-jost;
}

Then finally in your HTML, you can add them like this(since I already have font-jost as my font for the P tag I only added the different weight and their italic counterpart in HTML)

<p class="font-black" >This is font weight of 900</p>
<p class="font-black italic" >This is font weight of 900 Italic</p>

<p class="font-extrabold" >This is font weight of 800</p>
<p class="font-extrabold italic" >This is font weight of 800 Italic</p>

<p class="font-bold" >This is font weight of 700</p>
<p class="font-bold italic" >This is font weight of 700 Italic</p>

<p class="font-semibold" >This is font weight of 600</p>
<p class="font-semibold italic" >This is font weight of 600 Italic</p>

<p class="font-medium" >This is font weight of 500</p>
<p class="font-medium italic" >This is font weight of 500 Italic</p>

<p class="font-normal" >This is font weight of 400</p>
<p class="font-normal italic" >This is font weight of 400 Italic</p>

<p class="font-light" >This is font weight of 300</p>
<p class="font-light italic" >This is font weight of 300 Italic</p>

<p class="font-extralight" >This is font weight of 200</p>
<p class="font-extralight italic" >This is font weight of 200 Italic</p>

<p class="font-thin" >This is font weight of 100</p>
<p class="font-thin italic" >This is font weight of 100 Italic</p>

You'll see them rendered like this

Now If you don't have all 900 weights then don't worry tailwind just uses the previous font-weight meaning if you have weight 400 and then 800 then if you use any font from 500-700 will use font-weight of 400

Some rules while doing this is that the font's name should have no spaces like this Jost Light.ttf. If it is like this then either add a _ or - between those words or just remove those spaces completely like this JostLight.ttf.