tailwind css version 3 to 4 upgrade

I am working on a project using HTML, CSS, vanilla JS, and Tailwind version 4. The installation of Tailwind is successful, but while customizing Tailwind, it fails to update. It would be a great help if anyone could help to sort this issue. I also tried to manually create tailwind.config.js and added it in input.css still not working. The project I used is like assets-> styles.cs,ssrc->input.css,index.html,tailwind.config.js

//package.json

{
  "dependencies": {
    "@tailwindcss/cli": "^4.1.11",
    "tailwindcss": "^4.1.11"
  },
  "scripts": {
    "dev": "npx @tailwindcss/cli -i ./src/input.css -o ./assets/styles.css --watch"
  }
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import "tailwindcss";
@theme {
  --font-display: "Poppins", "sans-serif";
  --color-gray: #f5f5f5;
}

/*
need to update to version 4
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
     extend: {
      fontFamily: {
        custom: ["Poppins", "sans-serif"],
        customSecFont: ["Inter", "sans-serif"],
      },
      colors: {
        colorBlk: "rgba(49, 49, 49, 1)",
        colorGr: "rgba(6, 166, 79, 1)",
        colorBlue:"rgba(144, 189, 248, 1)"
      },
      container: {
        center: true,
        padding: "2rem",
        screens:{
          "3xl": "1440px",
        }
      },
      screens: {
        sm: "575px",
        md: "768px",
        lg: "992px",
        xl: "1200px",
        "2xl": "1400px",
        "3xl": "1900px",
        "max-xs": { max: "575px" },
        "max-sm": { max: "767px" },
        "max-md": { max: "991px" },
        "max-lg": { max: "1199px" },
        "max-xl": { max: "1399px" },
        "max-xxl": { max: "1899px" },
      },
    },
  },
  plugins: [],
};
*/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="assets/styles.css" rel="stylesheet" />
  </head>
  <body>
    <h1 class="font-display text-color-gray p-5 text-3xl font-medium underline text-center text-color-gray bg-red-700">Hello world!</h1><!-- text-color-gray not working -->
  </body>
</html>

Solution

From v4, the content property is removed. Instead, they're introducing automatic source detection. See more:

The theme.extend property is partially replaced by @theme. You'll need to deal with many changes and renames. For example, screens are now called breakpoint.

New CSS-first configuration option in v4

Important: TailwindCSS uses rem-based breakpoints by default. To switch to px-based breakpoints, it is recommended to disable the default rem-based breakpoints like this:

@import "tailwindcss";

@theme {  
  --breakpoint-*: initial;
  --breakpoint-sm: 575px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
  --breakpoint-3xl: 1900px;
}

You can read more about how this works here:

rem is dynamic. px is not. Together? Chaos.

Your max-breakpoint values are no longer needed - v4 introduces a new utility that handles this without requiring you to declare them.

Targeting a breakpoint range

So if you have an xl breakpoint defined, you can automatically use the max-xl utility as well.

<div class="max-xl:flex">
  <!-- ... -->
</div>

The container is simply gone because it can now be manually declared with the new @utility directive.

Container configuration

New breakpoints have been introduced for the containers, which need to be used and declared differently:

Container queries

<div class="@container">
  <div class="flex flex-col @md:flex-row">
    <!-- ... -->
  </div>
</div>

@import "tailwindcss";
@theme {
  --container-3xl: 1440px;
}

Overall, after deleting your current tailwind.config.js file, you might need this CSS-first configuration instead:

@import "tailwindcss";

@theme {
  /* Font families */
  --font-custom: "Poppins", "sans-serif";
  --font-custom-sec: "Inter", "sans-serif";
  
  /* Colors */
  --color-blk: rgba(49, 49, 49, 1);
  --color-gr: rgba(6, 166, 79, 1);
  --color-blue: rgba(144, 189, 248, 1);
  
  /* Breakpoints */
  --breakpoint-*: initial; /* because of px-based breakpoints disable default rem-based breakpoints */
  --breakpoint-sm: 575px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
  --breakpoint-3xl: 1900px;

  /* Container specific breakpoints */
  --container-*: initial; /* because of px-based breakpoints disable default rem-based breakpoints */
  --container-3xl: 1440px;
}

@utility container {
  margin-inline: auto; /* center */
  padding-inline: 2rem;
}

So, v4 introduces so many breaking changes that it's worth reading the official upgrade guides carefully.