1

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>

Improve this question
1
  • 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. Commented Jul 20 at 8:33

2 Answers 2

Reset to default
0

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.

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:

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

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.

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

<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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.