Should I create more videos on Tailwind CSS, or dive deeper into the brand new Tailwind CSS Version 4? If there’s any other topic you'd like me to cover, drop a comment below! 😉⬇
@@5G1Sanvith 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. - Should I make a video about it once it’s out? 🤔
So much confused while installing the new tailwind in my vite project, even ChatGPT could not helped ……meanwhile I find your Totorial here on UA-cam. Thanks ❤😊
THANK YOUUUU, I should be more updated huhu I was trying to figure out like why wasn't my tailwind installing for 2hours, I even used chatgpt. But then I checked youtube and saw this, Thank youuu
how to add custom break points and set custom colors this 4.0 version doesn't gave tailwind config file 😰 and also how to use plugins like material-tailwind , daisyui ?
Some of you might be wondering why it is still not working. The issue is the Node version. Install the latest version and follow along with the video-it will work. Node Version: v22.13.11
dear tell about extention about you use with new version beacuse our previous tailwindcss intellisence extention is not working with tailwind new verson.
@prashantsingh.118 actually it worked after i tried some things like , 1. uninstall and reinstall the extension 2. initially i was putting import "tailwindcss" only inside the index.css file but later i put it inside app.css aswell I did both of thing and it worked for me .
can u make a vid on how to use the custom tailwind classes in the react project with the new installation. Everything else is working fine with the new installation until i try to use the custom tailwind classes created by me
Cab you pls make video on how to convert config of version 3 into index css i have theme colors gradients font size etc on it how each thing we can cahnge ok index css
GRACIAS, ME SIRVIO ME QUEME LA CABEZA PORQUE NO PODIA INSTALAR TAILWINDCSS THANK YOU, IT HELPED ME. I BURNED MY HEAD BECAUSE I COULDN'T INSTALL TAILWINDCSS
sir i hace all the steps as you mentioned in your video but css i am applying is not showing on webpage is it bcoz i have never used or installed anything for tailwind before in my local environement of vscode (i have installed nodejs though) please help me out
Yes, I usually remove everything from the default CSS files (like App.css, index.css) when setting up Tailwind. However, it really depends on your project's needs. In most cases, you'll want to use Tailwind's utility-based styles and extend them with your own custom CSS rules. 😉
I am having a problem here, so basically i was using an index.css config from a github for color codes now since they have changed importing from @tailwind base; to @import tailwindcss what should i do there are a bunch of errors now
Can you share installation process of shadcn after tailwindcss v4? In my project when I install shadcn, tailwindcss v4 isn't validating and I installed tailwind following this tutorial.
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. 😉- Should I make a video about it once it’s out? 🤔
One of the biggest changes in Tailwind CSS v4.0 => Instead of a tailwind.config.js file, you can configure all of your customizations directly in the CSS file. 😉 For more informations go to => tailwindcss.com/blog/tailwindcss-v4#css-first-configuration
That’s right, but that’s coding! You’ve got to love learning new things. 🔥 But the better you get and the longer you do it, the easier it becomes - just keep going! 💪 😉
If you're using Nuxt, there's an installation guide under the Framework Guides section => tailwindcss.com/docs/installation/framework-guides/nuxt Otherwise, it depends on your build tool. If you're using Vite, the process is almost the same as in this video! 😉
With Tailwind CSS v4, you can now import daisyUI as a plugin in the CSS file. 😉 More informations on that topic => v5.daisyui.com/docs/v5-beta/#tailwind-css-4-compatibility
Hello so I have a question. I already have a React project and folder ready, do I still need to run the "npm create vite@latest tailwindcss4 -- --template react command"? Also, I don't know if it's relevant, but in my package.json, I have a script "start" that runs "react-scripts start".
After installation all things and run command npm run dev failed to load config from C:\Users\HP\Desktop\ecommerce\vite.config.js error when starting dev server: Error: The specified module could not be found. \?\C:\Users\HP\Desktop\ecommerce ode_modules@tailwindcss\oxide-win32-x64-msvc\tailwindcss-oxide.win32-x64-msvc.node at Module. extensions ..
I'll take a look at this for you - but first, can you please let me know your Node.js version? Also, did you install Tailwind v4 in a new project or an existing one? In the meantime, try deleting the node_modules folder and the package-lock.json file, then run npm install.
PS H:\Ajinkya_Content\Ajinkya_FullStack_Training\React_Learning\Practice\Practice> npm run dev > practice@0.0.0 dev > vite failed to load config from H:\Ajinkya_Content\Ajinkya_FullStack_Training\React_Learning\Practice\Practice\vite.config.js error when starting dev server: Error: The specified module could not be found. \\?\H:\Ajinkya_Content\Ajinkya_FullStack_Training\React_Learning\Practice\Practice ode_modules\@tailwindcss\oxide-win32-x64-msvc\tailwindcss-oxide.win32-x64-msvc.node at Object..node (node:internal/modules/cjs/loader:1725:18) at Module.load (node:internal/modules/cjs/loader:1313:32) at Function._load (node:internal/modules/cjs/loader:1123:12) at TracingChannel.traceSync (node:diagnostics_channel:322:14) at wrapModuleLoad (node:internal/modules/cjs/loader:217:24) at Module.require (node:internal/modules/cjs/loader:1335:12) at require (node:internal/modules/helpers:136:16) at Object. (H:\Ajinkya_Content\Ajinkya_FullStack_Training\React_Learning\Practice\Practice ode_modules\@tailwindcss\oxide\index.js:72:29) at Module._compile (node:internal/modules/cjs/loader:1562:14) at Object..js (node:internal/modules/cjs/loader:1699:10) After running the npm run dev command i am getting this error what should i do next?
Should I create more videos on Tailwind CSS, or dive deeper into the brand new Tailwind CSS Version 4?
If there’s any other topic you'd like me to cover, drop a comment below! 😉⬇
yes i want to know about how to install tailwindcss with postcss simply in vscode
in window 11
yes please
bro make a video on shadcn+vite reactjs
some error in tailwind installation
@@5G1Sanvith I am getting some validation error, are you having same problem? Please do share the solution if you got one. thanks
@@5G1Sanvith 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. - Should I make a video about it once it’s out? 🤔
So much confused while installing the new tailwind in my vite project, even ChatGPT could not helped ……meanwhile I find your Totorial here on UA-cam. Thanks ❤😊
This was just the video I was looking for. Very helpful and right to the point. Thank you!
You're welcome! Thanks for the feedback, I really appreciate it! 😉
THANK YOUUUU, I should be more updated huhu
I was trying to figure out like why wasn't my tailwind installing for 2hours, I even used chatgpt. But then I checked youtube and saw this, Thank youuu
You're welcome! Thanks for the feedback, I'm glad I could help. 😉
Finally after 3hrs of headache, Thanks!!
This was incredible. 👏
It is working. Thank you!
You're welcome! Thanks for the feedback, I really appreciate it! 😉
It worked. So helpful, thank you!
My pleasure, buddy! Thank you for your feedback 😉
Thank you for the simple and fast tutorial :)
My pleasure! I’m glad you like it and I appreciate your feedback! 😉
how to add custom break points and set custom colors this 4.0 version doesn't gave tailwind config file 😰 and also how to use plugins like material-tailwind , daisyui ?
you made my day. thanks a lot. I really needed a step by step guide here ❤
thank you so much for clearing the confusion , i was beginning to panic😆🙏
It work well. Thanks so much.
thank you so much,really grateful
Yes we want next video on tailwind CSS in detail
Thanks for the input! I’m already working on the next video about Tailwind CSS v4 - subscribe to get notified when it drops! 🔔🚀
Thanks dude!
You are so good darn it!!
Thank you very much, I really appreciate it! 🤩
YEEEEEESSSS! Thank you
You're welcome! Thanks for the feedback, I really appreciate it! 🤩
super helpful video sir appreciated now i can continue my learning!!!
saved the day mate👍
thank you sir ! very helpful
thank you so much sir for this video....
thank you so much!
Some of you might be wondering why it is still not working. The issue is the Node version. Install the latest version and follow along with the video-it will work.
Node Version: v22.13.11
Thank you!!
My Gosh Thank you ... I was in struggle
Thanks for the video and can you please update what all are changes and how to add the custom theme etc. its more difficult to know the updates in v4
tailwind intellisense is not working with v4 could you please tell us how to work on this
it is not showing suggestions
Bro uninstall then reinstall the extension my be problem is solved 😊😊😊
After running npm run dev command this error appears: the specified module could not be found.
helpful thanks
My pleasure! I'm happy to hear that and really appreciate your feedback! 😉
dear tell about extention about you use with new version beacuse our previous tailwindcss intellisence extention is not working with tailwind new verson.
Thank you
tailwind intellisense not working after the update, can you tell us what might be the problem. Yours is working fine.
Bro if you got the way edit your comment and let us know
@prashantsingh.118
actually it worked after i tried some things like ,
1. uninstall and reinstall the extension
2. initially i was putting import "tailwindcss" only inside the index.css file but later i put it inside app.css aswell
I did both of thing and it worked for me .
I also have the same problem, do you have a solution?
can u make a vid on how to use the custom tailwind classes in the react project with the new installation.
Everything else is working fine with the new installation until i try to use the custom tailwind classes created by me
Thanks for the input! I’m already working on the next videos about Tailwind CSS v4 - subscribe to get notified when they drops! 🔔😉
how to add custom break points and set custom colors this 4.0 version doesn't gave tailwind config file ?
create one manually perhaps?
Terimakasih abangkuh
My pleasure, buddy! Thank you for your feedback. 😉
Thanks you 👍👍
thanks, bro
thanks you ;)
Cab you pls make video on how to convert config of version 3 into index css i have theme colors gradients font size etc on it how each thing we can cahnge ok index css
Great idea! 🎯 I’ll see what I can do - stay tuned! 🔥😉
GRACIAS, ME SIRVIO ME QUEME LA CABEZA PORQUE NO PODIA INSTALAR TAILWINDCSS
THANK YOU, IT HELPED ME. I BURNED MY HEAD BECAUSE I COULDN'T INSTALL TAILWINDCSS
You're welcome! Thanks for the feedback, I really appreciate it! 😉
Thank You....
why is it bad to create the project folder in the dektop
The auto completion of classes is not working any solution?
please drop a video on all new features that comes with v4.0
Good idea! I might just do that - stay tuned! 😉🔥
sir i hace all the steps as you mentioned in your video but css i am applying is not showing on webpage is it bcoz i have never used or installed anything for tailwind before in my local environement of vscode (i have installed nodejs though) please help me out
Boom ❤
Glad you like it! 😉
Thanks
It's working but it is not showing any kind of suggestion like while adding text color or bg color as usual
do you omit everything from the default css file that came from vite or not?
Yes, I usually remove everything from the default CSS files (like App.css, index.css) when setting up Tailwind. However, it really depends on your project's needs. In most cases, you'll want to use Tailwind's utility-based styles and extend them with your own custom CSS rules. 😉
Everything is ok in v4 but now auto suggestions are not working.Tailwind css intelliSense is installed as well
I am facing the same problem
actually i want to import postcss.config.js and tailwindcss.config.cs is this process will applicable
I am having a problem here, so basically i was using an index.css config from a github for color codes now since they have changed importing from @tailwind base; to @import tailwindcss what should i do there are a bunch of errors now
how do get intellisense and how do i configure?
please make video on installation of shared tailwind on turbo repo
Can you share installation process of shadcn after tailwindcss v4? In my project when I install shadcn, tailwindcss v4 isn't validating and I installed tailwind following this tutorial.
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. 😉- Should I make a video about it once it’s out? 🤔
@@lukas.webdev Yeah please do make a video
With this version 4.0 I'm not getting tailwind.config.js file, so how could I install google fonts like roboto.
How make tailwind config insteeed?
One of the biggest changes in Tailwind CSS v4.0 => Instead of a tailwind.config.js file, you can configure all of your customizations directly in the CSS file. 😉
For more informations go to => tailwindcss.com/blog/tailwindcss-v4#css-first-configuration
i am not getting suggestions of tailwind classes even i have installed intellisence extension for it what should i do
Honestly... this is just more irritating to become a front end developer... We are getting changes every second!
That’s right, but that’s coding! You’ve got to love learning new things. 🔥
But the better you get and the longer you do it, the easier it becomes - just keep going! 💪 😉
what about using vue .js Same process ?
If you're using Nuxt, there's an installation guide under the Framework Guides section => tailwindcss.com/docs/installation/framework-guides/nuxt
Otherwise, it depends on your build tool. If you're using Vite, the process is almost the same as in this video! 😉
How to use daisyUI with the new tailwind css !?
With Tailwind CSS v4, you can now import daisyUI as a plugin in the CSS file. 😉
More informations on that topic => v5.daisyui.com/docs/v5-beta/#tailwind-css-4-compatibility
@@lukas.webdev thankyou 🙌
Unable to get the tailwind class names suggestions? Can you please give solution fir that?
I do not found tailwindcss.config.js
intellisense doest work on this whyyy
need more tutorial please
Thanks for letting me know! I'm already working on more Tailwind CSS content. Make sure to subscribe so you don't miss it. 😉
Make a full video about Tailwind CSS v4 .
I had confusion where to paste @import " tailwindcss".
Thank you. I am from Bangladesh 🇧🇩
Hello so I have a question. I already have a React project and folder ready, do I still need to run the "npm create vite@latest tailwindcss4 -- --template react command"? Also, I don't know if it's relevant, but in my package.json, I have a script "start" that runs "react-scripts start".
if you have a already React project and folder ready,
so ,
only use this cmd npm install tailwindcss @tailwindcss/vite
It works but i have type errors after changing the config file (im using ts and if u can mention how i use tailwind and css.modules in the same time)
h1 text is Bigger now 🔥
I only changed the text color - why would the h1 size be different? 🤔
Make an in-depth TailwindCSS v4 video, Lukus
Thanks for the input! I'll see what I can do - subscribe so you don't miss it! 😉
i have a problem that my npm run dev didn't work and i get a error. please help me
whats the error?
update your node js version
After installation all things and run command npm run dev
failed to load config from C:\Users\HP\Desktop\ecommerce\vite.config.js error when starting dev server: Error: The specified module could not be found. \?\C:\Users\HP\Desktop\ecommerce
ode_modules@tailwindcss\oxide-win32-x64-msvc\tailwindcss-oxide.win32-x64-msvc.node at Module. extensions ..
Is anyone can help me because searching everywhere.
@@vishalkumarchoudhary8497 same issue
@@rparhyarsame issue also
I'll take a look at this for you - but first, can you please let me know your Node.js version? Also, did you install Tailwind v4 in a new project or an existing one?
In the meantime, try deleting the node_modules folder and the package-lock.json file, then run npm install.
@@lukas.webdev my node version is 18 and yes I do install tailwind v4 in my project still facing the same problem
Interested
I am not getting tailwind suggestion after thus update
Exactly same , although it has implemented but not getting suggestions.
@@fazeelacharan3714 same
Best
Ya more make videos more about this
nxt video ..
Thanks for the input! I'm already working on the next video - subscribe to get notified when it drops. 😉
PS H:\Ajinkya_Content\Ajinkya_FullStack_Training\React_Learning\Practice\Practice> npm run dev
> practice@0.0.0 dev
> vite
failed to load config from H:\Ajinkya_Content\Ajinkya_FullStack_Training\React_Learning\Practice\Practice\vite.config.js
error when starting dev server:
Error: The specified module could not be found.
\\?\H:\Ajinkya_Content\Ajinkya_FullStack_Training\React_Learning\Practice\Practice
ode_modules\@tailwindcss\oxide-win32-x64-msvc\tailwindcss-oxide.win32-x64-msvc.node
at Object..node (node:internal/modules/cjs/loader:1725:18)
at Module.load (node:internal/modules/cjs/loader:1313:32)
at Function._load (node:internal/modules/cjs/loader:1123:12)
at TracingChannel.traceSync (node:diagnostics_channel:322:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
at Module.require (node:internal/modules/cjs/loader:1335:12)
at require (node:internal/modules/helpers:136:16)
at Object. (H:\Ajinkya_Content\Ajinkya_FullStack_Training\React_Learning\Practice\Practice
ode_modules\@tailwindcss\oxide\index.js:72:29)
at Module._compile (node:internal/modules/cjs/loader:1562:14)
at Object..js (node:internal/modules/cjs/loader:1699:10)
After running the npm run dev command i am getting this error what should i do next?
Your content is Very GOOD!! but?? Your Thumbnail does not match current Trend. how can i Contact you because i want to make Thumbnail for YOU!!!!!!!!!
Thank you sir
thanku thanku so much brother
thanks a lot!
thanks bro
How can I use ShadCN with it?