tailwind css version 3 to 4 upgrade [duplicate]

Question

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>

So you got as far as rewriting two settings, then instead you posted the question on Stack Overflow asking if we should rewrite the tailwind.config.js for you to the new v4 configuration? I don't exactly understand where you got stuck if you found the @theme and used it as well. — rozsazoltan
– rozsazoltan, Commented Jul 20 at 8:33

rozsazoltan · Accepted Answer · 2025-07-20 08:49:04Z

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.

rabbit · Accepted Answer · 2025-07-20 07:44:44Z

0

dnot defin it in config.js. V4 support use @theme. Get more detail from Chrome Dev Tools Elements -> Styles (eg. :root ).

and you can see the guide:https://tailwindcss.com/docs/adding-custom-styles

Define breakpoint

custom font family

answered Jul 20 at 7:44

rabbit

112 bronze badges

Collectives™ on Stack Overflow

tailwind css version 3 to 4 upgrade [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related