Here is what deepseek said: The adaptation of Large Language Models (LLMs) like GPT-4 to Tailwind CSS v4 syntax would depend on several factors, but here's a breakdown: 1. Immediate Adaptation (0-2 weeks) Basic syntax recognition (e.g., new @container directives, bg-linear-* gradients) could be integrated quickly if given explicit documentation. Simple pattern-matching for renamed utilities (bg-gradient-* → bg-linear-*) could be handled through rule updates. Major structural changes (CSS-first configuration) would require explicit training on examples of the new @theme block syntax. 2. Full Semantic Understanding (1-3 months) Contextual awareness of CSS variable-driven utilities (e.g., dynamic spacing with calc(var(--spacing) * N)) would need extensive code examples. Proper handling of new features like container query variants (@min-md:grid-cols-3) and 3D transforms would require exposure to real-world use cases. Nuanced understanding of color space changes (OKLCH/P3) would depend on updated design system documentation. 3. Edge Cases & Optimization (3-6+ months) Advanced pattern recognition for: Automatic content detection heuristics @starting-style transition workflows CSS variable animation constraints Performance implications of the new engine (microsecond rebuilds) wouldn't significantly impact LLM outputs but might affect coding recommendations. Key Challenges Configuration Paradigm Shift: Moving from JS config (tailwind.config.js) to CSS-first (@theme) requires retraining on thousands of examples to prevent hallucinated JavaScript config references. Dynamic Variants: The new arbitrary-value flexibility in utilities like grid-cols-[15] or data-* attributes needs broad pattern exposure to avoid over-reliance on the -[...] syntax. CSS Variable Integration: LLMs would need to internalize that all theme values are now CSS variables (e.g., var(--color-avocado-500)) rather than static values. Real-World Timeline Early Adoption: Within weeks of v4's release, LLMs could handle basic queries with explicit references to v4 docs. Production-Ready: ~3 months after significant community adoption, once sufficient v4-specific code examples exist in training data. Expert-Level: 6+ months as best practices emerge for advanced features like color interpolation modes (bg-linear-to-r/oklch) and container query ranges. Recommendation for Developers For the first 3-6 months: Verify Syntax with official v4 docs when using LLM-generated Tailwind code Preface Queries with "Using Tailwind CSS v4..." to bias the model Focus Patterns on core changes (CSS config, dynamic utilities) rather than edge cases The Tailwind team's automated upgrade tool and clear migration path suggest rapid community adoption, which would accelerate LLM training data collection. Expect decent v4 support in LLMs by Q3 2024 if the release maintains current momentum.
@@salamandr4111 back in April I did a test on ESLint Flat Configs which were announced in 2019 and released in 2023 and no LLM was able to generate them correctly, now I re-checked it and GPT4o and Claude 3.5 and Deepseek R1 all did it correctly, with a special prompt. The 4o mini failed it. So maybe with enough data and adoption we can be optimistic about 6 months. But for now it's probably better to generate old configs and use the tool to convert them as suggested, or provide examples at the top of the context.
Thankfully most non config changes aren't too big. And sure you can feed the LLM the docs, but that's more painful, and will you really do that for your css framework, your js framework, your db, your auth, your testing framework(s), etc?
Shadcn doesn’t fully work with Tailwind CSS v4 yet because Tailwind Merge (which Shadcd relies on) isn’t compatible with v4 at the moment. The Tailwind Merge team is already working on an update. There is a workaround if you can’t wait a few more days for the update… but I’d really recommend holding off until official support and updated docs from Shadcd are available. 😉
bro, you should not do it directly when the updates is just come. you should at least wait for a week to see the community feedback and wait them to solve some troubles until its stable enough to get the updates
i also ran into this problem. i temporarily installed shadcn with tailwind v3 and initialized shadcn. then i use the migrate script for tailwind v4 and now it works but i think i will still have to wait before adding components since those are still not migrated to v4 or you can migrate it manually. hope this helps
I hate this so much. Every thing is either just a minimal improvement or none at all. Everything is just a different way to do the same old thing. There is pretty much no real objective improvements. Only subjective ones fpr the people who like one more than another. But then all this breaking changes??? Breaking changes at this scale should NEVER EVER be done just for subjective preferences. Im sooo disappointed with the tailwind team
Feels like a rushed release. The CSS config lacks features and tooling from js, the main site is broken on mobile, the colors page now lacks copy-to-clipboard functionality... Some of these new features are nice but others are yet more half-solutions. I really wish they kept things more stable instead.
Better than tailwind can be a library which allows to make inline css instead of classes, which will not have all CSS posibilities, but regular 2 years late updates will cover new features
@@undefined24 Sounds good. I guess it will be popular. It has everything: 1. Cool name 2. Additional complexity So the users will just need to remember another name for CSS property and use it. For example they will not need to use font-size: 12px" They will just use simplier version: size-font: "12px"
css based config sucks, anyway before you could also have your colors in globals.css and use with some other libs. no autocomplete and css syntax. that is damn bad
Unable to run npx @tailwindcss/upgrade@next? its showing error npx @tailwindcss/upgrade@next modules\@tailwindcss\upgrade\dist' ≈ tailwindcss v4.0.0 │ Searching for CSS files in the current directory and its -app/client (Upgrade-Tailwind-v3-to-v4) │ subdirectories… │ ↳ Linked `.\tailwind.config.js` to `.\src\index.css` │ Migrating JavaScript configuration files… │ ↳ Could not load the configuration file: Can't resolve │ '././F:\Node+React\ts-react-blog-app\MERN-blog-app\client\tailwind.config.js' │ in │ 'C:\Users\ADMIN\AppData\Local pm-cache\_npx\0044b4041b3b52e1 ode_modules\@tailwindcss\upgrade\dist'
Damn, it will take 2 years for LLMs to adapt to the new syntax
You can feed things like Cursor the documentation, but it's still kind of a pain
Here is what deepseek said:
The adaptation of Large Language Models (LLMs) like GPT-4 to Tailwind CSS v4 syntax would depend on several factors, but here's a breakdown:
1. Immediate Adaptation (0-2 weeks)
Basic syntax recognition (e.g., new @container directives, bg-linear-* gradients) could be integrated quickly if given explicit documentation.
Simple pattern-matching for renamed utilities (bg-gradient-* → bg-linear-*) could be handled through rule updates.
Major structural changes (CSS-first configuration) would require explicit training on examples of the new @theme block syntax.
2. Full Semantic Understanding (1-3 months)
Contextual awareness of CSS variable-driven utilities (e.g., dynamic spacing with calc(var(--spacing) * N)) would need extensive code examples.
Proper handling of new features like container query variants (@min-md:grid-cols-3) and 3D transforms would require exposure to real-world use cases.
Nuanced understanding of color space changes (OKLCH/P3) would depend on updated design system documentation.
3. Edge Cases & Optimization (3-6+ months)
Advanced pattern recognition for:
Automatic content detection heuristics
@starting-style transition workflows
CSS variable animation constraints
Performance implications of the new engine (microsecond rebuilds) wouldn't significantly impact LLM outputs but might affect coding recommendations.
Key Challenges
Configuration Paradigm Shift: Moving from JS config (tailwind.config.js) to CSS-first (@theme) requires retraining on thousands of examples to prevent hallucinated JavaScript config references.
Dynamic Variants: The new arbitrary-value flexibility in utilities like grid-cols-[15] or data-* attributes needs broad pattern exposure to avoid over-reliance on the -[...] syntax.
CSS Variable Integration: LLMs would need to internalize that all theme values are now CSS variables (e.g., var(--color-avocado-500)) rather than static values.
Real-World Timeline
Early Adoption: Within weeks of v4's release, LLMs could handle basic queries with explicit references to v4 docs.
Production-Ready: ~3 months after significant community adoption, once sufficient v4-specific code examples exist in training data.
Expert-Level: 6+ months as best practices emerge for advanced features like color interpolation modes (bg-linear-to-r/oklch) and container query ranges.
Recommendation for Developers
For the first 3-6 months:
Verify Syntax with official v4 docs when using LLM-generated Tailwind code
Preface Queries with "Using Tailwind CSS v4..." to bias the model
Focus Patterns on core changes (CSS config, dynamic utilities) rather than edge cases
The Tailwind team's automated upgrade tool and clear migration path suggest rapid community adoption, which would accelerate LLM training data collection. Expect decent v4 support in LLMs by Q3 2024 if the release maintains current momentum.
@@salamandr4111 back in April I did a test on ESLint Flat Configs which were announced in 2019 and released in 2023 and no LLM was able to generate them correctly, now I re-checked it and GPT4o and Claude 3.5 and Deepseek R1 all did it correctly, with a special prompt. The 4o mini failed it. So maybe with enough data and adoption we can be optimistic about 6 months. But for now it's probably better to generate old configs and use the tool to convert them as suggested, or provide examples at the top of the context.
Thankfully most non config changes aren't too big. And sure you can feed the LLM the docs, but that's more painful, and will you really do that for your css framework, your js framework, your db, your auth, your testing framework(s), etc?
I came back to see the comments and my reply is gone, thanks youtube
Absolutely LOVE the new Tailwind 4, so much cleaner syntax.
hello sir could you tell me what if i want to stay in version 3 isn't it possible?
Thank you for doing this. I will not be using v4. CSS for config? That's madness
nice break down thanks for sharing
Thanks for the information. The initial setup through me off a bit.
I like things getting simpler 👌
Oh wow @codingflow in the comments. Love your content 🫶
thanks very informative ❤
How to use !important in tailwind version 4 ?
This shouldn't have changed, should still be done by adding ! to the start of the class like "!bg-green-500"
What about group class?
I kinda liked the idea of [ ] around not standard values. So you could see that is not standard.
They are still valid or?
Do we need to migrate any custom built plugins as well?
I have a problem with tailwind 4 I can't use with vite it gives error on init
same here . can anybody here sort it out for me
also have those problems, im staying on 3 for now. Also I dont really like the changes that 4 brings with it, seems like a downgrade
@@requestfx5585 but my 3 v also not working
me too. why it is too critical to configure?
@@requestfx5585 lol how to stay on 3?
how soon will we have Intellisense for css based configuration?
can someone at betterstack plz tell him to water his peace lily it is very sad :(
I will do this now! Sorry! 💐
Hello I need your help can you make a video how integrate daisyui with vite tailwind css v4 its very important
i need that too for a project 😭
Plz sir reply
It is not supporting shadcn ui
Wow ❤❤❤
🎉 thanks
have a problme when using @apply directive in scoped style in vue3.
how to use in next js my shadcn is not working
Shadcn doesn’t fully work with Tailwind CSS v4 yet because Tailwind Merge (which Shadcd relies on) isn’t compatible with v4 at the moment. The Tailwind Merge team is already working on an update. There is a workaround if you can’t wait a few more days for the update… but I’d really recommend holding off until official support and updated docs from Shadcd are available. 😉
Im surprised theres any compatible plugins. I hate dependencies so bad
how do u make such animations? any tools please?
I am not able to shadecn UI with vite after this please help 😢😢
Install shadcn manually
I saw many issues already opened. Let them make compatible first maybe or help them make with a pr instead of crying
@@krekas what a nice comment bro. I wish there were more people like you
bro, you should not do it directly when the updates is just come. you should at least wait for a week to see the community feedback and wait them to solve some troubles until its stable enough to get the updates
i also ran into this problem. i temporarily installed shadcn with tailwind v3 and initialized shadcn. then i use the migrate script for tailwind v4 and now it works but i think i will still have to wait before adding components since those are still not migrated to v4 or you can migrate it manually. hope this helps
I hate this so much.
Every thing is either just a minimal improvement or none at all.
Everything is just a different way to do the same old thing.
There is pretty much no real objective improvements.
Only subjective ones fpr the people who like one more than another.
But then all this breaking changes???
Breaking changes at this scale should NEVER EVER be done just for subjective preferences.
Im sooo disappointed with the tailwind team
totally valid points! however nobody is forcing you to upgrade, are they?
perfect! OKLCH!!!
how to change prefix can someone let me know. Thank you
@import 'tailwindcss' prefix(tw);
In your CSS file is apparently the way now 🙂
nice
Feels like a rushed release. The CSS config lacks features and tooling from js, the main site is broken on mobile, the colors page now lacks copy-to-clipboard functionality...
Some of these new features are nice but others are yet more half-solutions. I really wish they kept things more stable instead.
If you are annoyed with all this stuff and you want a simple minimal solution for inline css there is always my framework :)
Proceeds to not share said framework 🤦🏽
@@DanteMishimahaha you are right.
It's called stylezero css.
The website is under construction.
@@DanteMishima haha you are right, it's called stylezero css
Better than tailwind can be a library which allows to make inline css instead of classes, which will not have all CSS posibilities, but regular 2 years late updates will cover new features
StyleX?
@@undefined24 Sounds good. I guess it will be popular. It has everything:
1. Cool name
2. Additional complexity
So the users will just need to remember another name for CSS property and use it. For example they will not need to use
font-size: 12px"
They will just use simplier version:
size-font: "12px"
Beacause of this upgrade i am using normal css
css based config sucks, anyway before you could also have your colors in globals.css and use with some other libs. no autocomplete and css syntax. that is damn bad
TBH I agree with you. I think they do it to simplify the tailwindcss play website. I could be wrong, I'm just guessing rn
Yes
I think CSS based syntax is so much cleaner than js
Tailwind is terrible
Said nobody ever
why ?
yeah…no
Imagine coming to a video just to call it terrible. Clown behaviour
ragebait
Unable to run npx @tailwindcss/upgrade@next? its showing error
npx @tailwindcss/upgrade@next modules\@tailwindcss\upgrade\dist'
≈ tailwindcss v4.0.0
│ Searching for CSS files in the current directory and its -app/client (Upgrade-Tailwind-v3-to-v4)
│ subdirectories…
│ ↳ Linked `.\tailwind.config.js` to `.\src\index.css`
│ Migrating JavaScript configuration files…
│ ↳ Could not load the configuration file: Can't resolve
│ '././F:\Node+React\ts-react-blog-app\MERN-blog-app\client\tailwind.config.js'
│ in
│ 'C:\Users\ADMIN\AppData\Local
pm-cache\_npx\0044b4041b3b52e1
ode_modules\@tailwindcss\upgrade\dist'