Get started with Tailwind CSS latest version 2.2 without installing it

Подписаться 13 тыс.

Просмотров 3,7 тыс.

50% 1

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

Опубликовано:

30 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 71

@VaibhavShete 3 года назад

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

@Thirus 3 года назад

Oh that’s great! Good to know :)

@taheermattur 3 года назад

Thank you! I needed this!!

@kieran2347 3 года назад

Yet another amazing video! Thanks, Shruti

@Thirus 3 года назад

You’re welcome :)

@vishal_taywade 3 года назад

OMG 😻 It's really awesome 👍👍 I love the latest features of Tailwind CSS 😻

@Thirus 3 года назад

Yes there are so many new features!

@stephenlau2845 3 года назад

Wao, So Powerfull the Tailwind Css v2.2, Thank you your Tutorial....!

@Thirus 3 года назад

You’re welcome 😊

@Slachy_dot 3 года назад

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

@Thirus 3 года назад

Happy to hear that! You’re welcome 😊

@tanzimibthesam5861 3 года назад

I am not good at Hindi but you are Tailwindwali.Excellent video

@Thirus 3 года назад

Ha ha thanks 😀

@webdeveloper7994 3 года назад

Your tutorials are awesome

@Thirus 3 года назад

Thank you 😊

@yddc902 3 года назад

made my day!

@Thirus 3 года назад

Awesome!

@puneetsingh9678 3 года назад

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

@Thirus 3 года назад

Thanks for the info Puneet

@puneetsingh9678 3 года назад

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

@Thirus 3 года назад

Initially I wasn’t comfortable either. But you may start liking it slowly. Look where I am now! Can’t not use it

@puneetsingh9678 3 года назад

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

@Thirus 3 года назад

Yes that’s how it is! Feel free to DM on Twitter @shrutibalasa if you get stuck

@nitindevatraj 2 года назад

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 ?

@lordsonmateleddi5481 3 года назад

you are the best 😘😘

@denismakau544 3 года назад

nice one😊

@gideonetowa9075 3 года назад

Thanks for the amazingly simplified video. How do I toggle or off/on the JIT watcher? I'm using Vscode for windows

@Thirus 3 года назад

Remove the -jit flag in the command when you don’t need it

@gideonetowa9075 3 года назад

@@Thirus Thank you

@jbraddockm 3 года назад

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.

@Thirus 3 года назад

With wordpress? I need to look into it

@jbraddockm 3 года назад

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

@NZjmac 3 года назад

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?

@Thirus 3 года назад

No I’m sure that’s not the case. I only have npm globally installed. I wonder why it doesn’t work

@NZjmac 3 года назад

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.

@Thirus 3 года назад

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

@rxxt-sh1vj 3 года назад

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 ?

@Thirus 3 года назад

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

@rxxt-sh1vj 3 года назад

@@Thirus Thanks for the prompt reply...:D one more thing can you make a complete course on using Tailwind CSS ?

@rangabharath4253 3 года назад

awesome

@anuj7286 3 года назад

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?

@Thirus 3 года назад

Can you connect to me on Twitter @shrutibalasa and share some screenshots?

@anuj7286 3 года назад

@@Thirus okay i will share it.

@oscarl06 3 года назад

Perfect

@Thirus 3 года назад

Thank you!

@adarshchakraborty 3 года назад

What is the use of postcss

@Thirus 3 года назад

You can use autoprefixer with it. So you don’t have to add prefixes like “-webkit-“ manually

@rubenchiquin3768 3 года назад

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

@Thirus 3 года назад

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?

@rubenchiquin3768 3 года назад

@@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?

@Thirus 3 года назад

Hmm no, I don’t think so

@Krlos5605 3 года назад

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

@Thirus 3 года назад

Looks like there’s no other way

@sunilsharma1233 Год назад

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.

@Thirus Год назад

Please follow this video on latest version - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-h9Zun41-Ozc.html

@sunilsharma1233 Год назад

@@Thirus not a frontend developer. but love your content. thanks a lot

@srikanth_mrconfident 3 года назад

Hi Shruti ji your is tutorial amazing please do hindi language videos

@Thirus 3 года назад

I’m not good at Hindi

@srikanth_mrconfident 3 года назад

ok mam thanks for reply

@hi-yi7en 3 года назад

👍👍👍

@CharlesOkwuagwu 3 года назад

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

@Thirus 3 года назад

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