tailwind.config.js How to write ？

[triggergun]

I searched for a long time but couldn't find the official document.

[wongjn]

If you are using Tailwind v4, you shouldn't need a tailwind.config.js file. Configuration is done in CSS.

[rozsazoltan]

Related:

• What's breaking changes from v4?
• Automatic Source Detection from TailwindCSS v4
• New CSS-first configuration option in v4
• Which TailwindCSS v4 namespace matches a given TailwindCSS v3's theme keys? #19020

[KaloudasDev]

Hello! In Tailwind CSS v4, the configuration approach has significantly changed. Here's what you need to know:

For Tailwind v4 - CSS-Based Configuration
You no longer need a tailwind.config.js file. Instead, configure everything in your CSS:

/* main.css */
@import "tailwindcss";

@theme {
  /* Custom colors */
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
  
  /* Custom fonts */
  --font-family-sans: 'Inter', 'system-ui';
  
  /* Custom spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  
  /* Breakpoints */
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
}

@layer base {
  /* Base styles */
  html {
    font-family: var(--font-family-sans);
  }
}

@layer components {
  /* Custom components */
  .btn-primary {
    @apply bg-primary text-white px-4 py-2 rounded;
  }
}

@layer utilities {
  /* Custom utilities */
  .text-shadow {
    text-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
  }
}

If You Need a Config File (Legacy or Specific Cases)
For v3 or when explicitly needed in v4:

// tailwind.config.js (v3 style)
module.exports = {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#64748b',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui'],
      },
    },
  },
  plugins: [],
}

Key Changes in v4:

• No tailwind.config.js required
• Configuration moved to CSS @theme directive
• Automatic content detection
• CSS-first approach

Migration from v3 to v4:

1. Remove tailwind.config.js
2. Move your theme configuration to CSS @theme
3. Update PostCSS configuration to use @tailwindcss/postcss
4. Use @import "tailwindcss" instead of @tailwind directives

The official v4 documentation is available at: https://tailwindcss.com/docs/configuration

[mehediScriptDev]

if youre using tailwind version 4, u dont need to tailwind config anymore bro...

Tailwind version 4 is much easier than 3... u can simply define color,breakpoints and other things with your global.css/index.css (which one ur using)

@theme {
/* Custom colors */
--color-primary: #3b82f6;
--color-secondary: #64748b;

/* Custom fonts */
--font-family-sans: 'Inter', 'system-ui';

/* Custom spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;

/* Breakpoints */
--breakpoint-sm: 40rem;
--breakpoint-md: 48rem;
--breakpoint-lg: 64rem;
}

like this..and its really fun after u adapt it...easy peasy...
and https://tailwindcss.com/ u should read official documentation ..