Custom font class name

1. Define custom font class, font-mySpecialFont in tailwind.config.js.

   // tailwind.config.js
   module.exports = {
       theme: {    
           extend: {
               fontFamily: {
                   mySpecialFont: ["Times New Roman", "Times", "serif"],
               },
               colors: {
                   // Single custom color
                   'my-custom-blue': '#1A73E8',
   
                   // Custom color with shades
                   'brand-primary': {
                       DEFAULT: '#FF5733', // Default shade
                       light: '#FF8D6A',
                       dark: '#CC452A',
                   },
               },
           }
       }
   }
   

2. Use the custom font class in your JSX.

   // jsx
   <h2 className="font-mySpecialFont bg-my-custom-blue">How It Works</h2>
   <p className="bg-brand-primary">How It Works</p>
   <p className="bg-brand-primary-light">How It Works</p>
   

The following properties can also be customized:

• fontSize
• fontWeight
• colors
• spacing
• borderRadius
• boxShadow
• and more...