tailwindcsss next js change font

Step 1: Install Tailwind CSS and its dependencies by using npm or yarn.

npm install tailwindcss postcss autoprefixer

or

yarn add tailwindcss postcss autoprefixer

Step 2: Create a tailwind.config.js file in the root of your Next.js project to customize the font family.

// tailwind.config.js

module.exports = {
  theme: {
    fontFamily: {
      sans: ['Helvetica', 'Arial', 'sans-serif'],
      // Add more custom fonts if needed
    },
  },
}

Step 3: Set up Tailwind CSS with PostCSS by creating a postcss.config.js file in the root of your project.

// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Step 4: Import Tailwind CSS styles in your styles/globals.css file.

/ styles/globals.css /

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Step 5: Apply the custom font family to your components or pages by using Tailwind CSS utility classes or directly in your JSX/HTML.

{/ Using Tailwind CSS utility classes /}
<div className="font-sans">Your content here</div>

{/ Directly in JSX /}
<div style={{ fontFamily: 'Helvetica, Arial, sans-serif' }}>Your content here</div>

Step 6: Start or rebuild your Next.js application to see the changes.

npm run dev

or

yarn dev

This sequence of steps will guide you through setting up Tailwind CSS in your Next.js project and changing the font family using Tailwind utility classes or directly in your JSX/HTML.