Get started with Tailwind CSS latest version 2.2 without installing it
Вставка
- Опубліковано 19 вер 2024
- Tailwind CSS version 2.2 was released on June 17th with a huge number of features - the biggest one being a high performance CLI that allows you to use all the latest features of Tailwind CSS without even installing it in your project. This video shows you how to do that with all the required options.
The video is sponsored by Showwcase. Join me there - www.showwcase.com?referralToken=kvpih077b
Please note, this is the right way to pass the path parameter for purge: --purge="./**/*.html"
Subscribe and stay tuned for tips, tutorials and more.
Follow me on Twitter: / shrutibalasa
Follow Thirus on Twitter: / thirusofficial
Visit my website: www.shrutibala...
#tailwindcss #tailwindcli #tailwindv2.2 #tailwindlatest
Thank you! I needed this!!
This is amazing! I have been trying to learn postcss and things like gulp/webpack just to get what this does out of the box! I just couldn't figure out the 'watch' option in those things. But now I do, thanks to you.
Thanks for walking me through it so nicely. :)
Oh that’s great! Good to know :)
Yet another amazing video! Thanks, Shruti
You’re welcome :)
made my day!
Awesome!
OMG 😻
It's really awesome 👍👍 I love the latest features of Tailwind CSS 😻
Yes there are so many new features!
Based on this video I have created a custom script for my ReactJS project:
"build-css": "npx tailwindcss -i ./src/tailwind.css -o ./src/index.css --minify --jit --purge='./src/**/*.jsx' -w"
But for some reason it was not working
with yarn run build-css command when I tried it with npm run build-css it worked. If you guys are facing similar problem might wanna use npm instead of yarn
Thanks for the info Puneet
Thank you for your videos they are very helpful and made my days a lot easy with getting a nice workflow in my vs-code setup
Happy to hear that! You’re welcome 😊
Wao, So Powerfull the Tailwind Css v2.2, Thank you your Tutorial....!
You’re welcome 😊
Your tutorials are awesome
Thank you 😊
This new version is soo awesome 😻. I've decided you to use tailwindcss in new project but still not comfortable with it, I like vanilla css more. But learning tailwindcss will help me in the long run
Initially I wasn’t comfortable either. But you may start liking it slowly. Look where I am now! Can’t not use it
@@Thirus Thanks its a little intimidating as I have to finish project in a deadline and using external library will give me plus points hence using it, but also scared of getting stuck on something and not able to complete task under given time. I guess that's part of being a developer 😅 so gonna give it a shot.
Yes that’s how it is! Feel free to DM on Twitter @shrutibalasa if you get stuck
you are the best 😘😘
I am not good at Hindi but you are Tailwindwali.Excellent video
Ha ha thanks 😀
So so thankful that I found this video, even the official docs don't contain info on using the jit and purge options.just one of thing is there a resource where I can dive deep into how to use this cli , for ex I didn't much understand how the arg given to the purge flag works ?
nice one😊
Thank you for this. I was wondering if you have a tutorial that additionally shows how to integrate and compile scss files as well as to use Tailwind JIT with WordPress? I couldn’t find an up to date tutorial that address these two questions. Thx.
With wordpress? I need to look into it
@@Thirus I’ve actually managed to do this last night with Laravel Mix, sass, sass-loader and using your tutorials. Now I have to integrate BrowserSync to the setup and move it to an actual WordPress setup. But a tutorial on this would be highly appreciated. Also, the syntax in your Postcss config file is different than most documentation online. For example, how do I add tailwindcss/nesting to it? If I change the script to accept require('tailwindcss/nesting') then the conditional check for cssnano gets broken. How can I add this as well as plug-in options for cssnano while keeping the env check in place? Thank you.
Thanks for the amazingly simplified video. How do I toggle or off/on the JIT watcher? I'm using Vscode for windows
Remove the -jit flag in the command when you don’t need it
@@Thirus Thank you
Hi Shruti ji your is tutorial amazing please do hindi language videos
I’m not good at Hindi
ok mam thanks for reply
awesome
Hi Shruti Great tutorial but there must be a step missing, I have tried the command npx tailwindcss -o styles.css on three different computers (2 mac's and on linux) and this command wont work on any of them. If I add a src styles sheet with @tailwind directives and use npx tailwindcss build src/style.css -o styles.css it will work. It woud appear that there is some global tailwind css stuff on your machine that the npx command is using?
No I’m sure that’s not the case. I only have npm globally installed. I wonder why it doesn’t work
The output from the command shows tailwindcss 2.1.4 then Usage tailwind [options] then a list of the commands available help | init | build (all have options) ? I get this output on all machines with just the tailwind version varying.
Oh wait tailwind 2.1.4 how? It must be 2.2.x
Why is it getting you the older version? That’s why it doesn’t work. This is the feature of 2.2 version
Perfect
Thank you!
Hello shruti...how can we purge files with both .html and .php extensions in one command? Which is better to you according to you out of bootstrap 5.0 or tailwind CSS 2.2 ?
You can mention both the paths of html and php files in the ‘purge’ option.
Bootstrap or Tailwind depends on your requirements. If you need ready components like models, navbars and buttons, you can use Bootstrap. But otherwise Tailwind is great
@@Thirus Thanks for the prompt reply...:D one more thing can you make a complete course on using Tailwind CSS ?
👍👍👍
Hi mam, I am facing some issues in tailwind installation in next js is JIT mode is breaking the CSS in the latest version without JIT mode it works fine... How to fix that?
Can you connect to me on Twitter @shrutibalasa and share some screenshots?
@@Thirus okay i will share it.
i am on windows and using npm 6.14.15. i am facing error whille executing npx npm ERR! Could not install from "Sharma\Desktop\test\=\_npx\2072" as it does not contain a package.json file.
Please follow this video on latest version - ua-cam.com/video/h9Zun41-Ozc/v-deo.html
@@Thirus not a frontend developer. but love your content. thanks a lot
What is the use of postcss
You can use autoprefixer with it. So you don’t have to add prefixes like “-webkit-“ manually
Now that I don't have to install it, i'm having problems using the tailwlind CSS IntelliSense plugin for the snippets. I've checked the installation details of the plugin and it says that "In order for the extension to activate you must have tailwindcss installed and a Tailwind config file named tailwind.config.js in your workspace."
Any ideas how to remidate this? P.D: Great video! Helped me alot
Installing might not be required. Config file is required for sure. Can you try generating the default config file and see if the plugin works?
@@Thirus Hello! Thanks for the quick reply. Yes, i've tried, but it doesn't seem to work. But as soon as I install tailwind (npm install tailwindcss) and restart Visual Studio Code, the plugin starts working again. Perhaps there's a way to keep it always on?
Hmm no, I don’t think so
@@Thirus I'm having the same problem. Tailwlind CSS IntelliSense is not working using Tailwind CLI, I had to install Tailwindcss and create a tailwind config file to get IntelliSense to work again.
Looks like there’s no other way
how to run tailwind project on other devices?
You mean without hosting the website?
@@Thirus yes. i mean html files and css file to be opened on other devices.
Nice 🙂 One from me
Thank you :)
Thanks for these great tutorials.
Please can you share your recommendations for using the new v2.2 with vite+vue3+TS
since v2.2 has its own cli, how do we get it to play nice with vite and still have the watch option running
Everything would be same as before. This CLI is just another way of using Tailwind.
For JIT mode, in tailwind.config.js - add
‘mode’: ‘jit’
and make sure you have the purge paths correct.
With this if you do “npm run dev” (or whatever you usually do in Vite), it would start watching the files
Can you make one deep side course ?
Deep side course meaning?
@@Thirus sry deep dive. Like nav bar, image sliders, projects, etc.
There are multiple such videos in this playlist - navbar, contact section, testimonials section, portfolio, landing page and more