How To Install Tailwind CSS | Install Tailwind Via NPM | Tailwind Tutorial | Learn Tailwind 2 CSS

[@codewithdary]

LETS CONNECT THROUGH INSTAGRAM. www.Instagram.com/codewithdary

[@jessica-tv6ep]

You deserve more subscribers, Man! Don't stop, keep going! You'll get more subs, I believe.

[@codewithdary]

Ah that's so sweet! Thank you so much. 1 or 1M subscribers, I just want to help people :)

[@camaronornelas3178]

Great walkthrough. Been struggling with plesk install of tailwind, but this worked for me!!!

[@codewithdary]

Glad it helped buddy!! :)

[@yavuzdemir7184]

Thanks. This video helped me understand the official instructions clearly.

[@codewithdary]

I'm happy to help Yavuz!

[@chooticharika]

You are the only one gives simple and deep guidelines. Thank you very much

[@codewithdary]

You are welcome Charika :)

[@arshiashirzad4329]

peerfect, I just can say this was the only tutorial that solved my problem installing tailwind, keep going

[@blueprintoc3453]

This tutorial solved my inability to get tailwind to work with Electron. Their documentation doesn't state to pre-build the style.css before using it. Though i'm new to JS programming so that might just be common knowledge.

[@codewithdary]

Lovely!

[@stefanocons]

Your videos are amazing! You are a very good teacher and I'm learning a lot, thank you so much!!

[@codewithdary]

Thanks for being here Stafano, that means a lot to me as well! :)

[@shbd1701]

clean and simple explanation easy to understand, glade to find your channel. keep going wish you the best...thumbs up

[@codewithdary]

Thank you for your nice words!

[@oluwaseyibabarinde5297]

Thank you Dary for the tutorial

[@codewithdary]

Thank you for watching Oluwaseyi!

[@newdehan3889]

When i download tailwind, i dont get package json.. only lock json.. what i must to do ? Write manualy or ?

[@MrMrsmerrell]

rerun npm install -D tailwindcss

[@theguy6740]

Nothing opens in the workspaces for me after I follow all steps, not Node nor package-lock or package .json files

[@codewithdary]

Please follow their official documentation: tailwindcss.com/docs/installation

[@wealthwisy]

man trust me you deserve better !

[@codewithdary]

We will get there!!!

[@DjokovicIsOurLordAndSaviour]

This worked for me. Thanks.

[@codewithdary]

You're welcome!

[@soufianebk6252]

your tutorials are great !!!

[@codewithdary]

Thank you!

[@manuelcuevas1378]

Great video thanks.

[@codewithdary]

Thank you Manuel!

[@serbob8636]

Hello, I have a problem, my classes are not working, what could be the problem?

[@codewithdary]

Probably linked your CSS in the wrong way or your CSS has not been compiled :)

[@dnlcorona]

I have the same problem, what should i do?

[@edozieonyeanusi4225]

I noticed your directives had the yellow underlines showing a warning of some sorts, I had something quite similar in my own too with an error message of "Unknown at rule @tailwind". I would love to know how you corrected yours, thank you.

[@codewithdary]

Tailwind directives are not valid CSS syntax; so VSCode is complaining. You can suppress unknown at rules warnings in the Lint setting for CSS by modifing your module.exports: module.exports = { rules: { 'at-rule-no-unknown': [true, { ignoreAtRules: [ 'tailwind', 'apply', 'variants', 'responsive', 'screen' ] }], 'declaration-block-trailing-semicolon': null, 'no-descending-specificity': null }

for some reason at the point when you use npm run build-css i got a warning message instead that says no utility classes detected in source file i cant get further and didnt get the file saved shown any ideas?

[@aaron6822]

cant believe im stuck 5 min in but is (classname= "underline text-3x1") a shrotcut? is there a plugin i didnt install or a step i could have possibly missed with the tailwind installation? it does not unterline or increase text size bby 3x. im pretty sure movingf forward without figuring this out first will be an issue with the css in the future. accepting help from anybody

[@codewithdary]

Did you run npm run watch to compile your assets?

[@aaron6822]

@@codewithdary thanks for the reply. It was a simple mistake I was able to rectify it. I hope to learn as much as I can from this video and the others you have taken the time to create

[@qobiljonnajmiddinov4551]

Hello! What kind of color theme is used in the video?

[@codewithdary]

I got a new one right now but I think it was Material Theme Palenight

[@dreadskin3439]

it doesn't shows to me package.json ?

[@pauliversoncortez1544]

I hope i can see more of this, and please add a playlist for this tailwind tutorial. thanks sir Dary.

[@codewithdary]

Will do!

[@anandoptimus7160]

I have done my tailwindcss class but it doesn't works 🙃 y....

[@jansanchez]

Cool video. In my case, all the process goes well but then when I try to use some Tailwindcss class they don't load ):

[@codewithdary]

Clear cache?

[@alanproduction910]

thank you

[@codewithdary]

You're welcome Alan!

[@orlandoflores-pd]

Having an issue with this. When coding an index.html and adding tailwind classes, can't see the css classes being recognized in Live Server, unless I run (every time I add a new class) 'npm run build-css'. It's like the generated css only contains the added classes in the html file. So it's frustrating that I have to run that line every time I add a new class in the html. Is that how it's supposed to work, or I'm doing something wrong :/

[@codewithdary]

That is actually what you want.. Otherwise you're adding a stylesheet of 5 MB which can slow down your site. You want to minimise the stylesheet size by compiling it and only using classes that you need.

[@orlandoflores-pd]

@@codewithdary Yep I see the point that the css file is light because it only has the needed css lines. But let me explain why I suffer with my workflow: I add a class, then I have to run the build-css line. This again and again, for every single class. It gets annoying. I think there could be a middle point, where you could add freely any classes from the complete stylesheet, and skipping the build-css run command. And in a later stage, when you have just 300 classes from the available 5000, then compile it so it's just 2 kb. Hope you see my point, I'm sure I'm doing something wrong, because in videos you only hit save

[@elyorsadulaev7261]

throwing error 404 when i try install tailwind css to my vue project, can you help me ?

[@codewithdary]

Have you seen Tailwinds official documentation when using Vue? tailwindcss.com/docs/guides/vite

[@Olu_Adm]

I got the installation up to the point of 9:44, only to open the css file and see that it is empty Please what can I do???

[@codewithdary]

Please following the following link, Tailwind CSS came out with a new version: tailwindcss.com/docs/guides/laravel

[@riateefrhaimjayj.3945]

is this also applicable if I'm going to use pnpm?

[@codewithdary]

I have never used pnpm but I assume it does!

[@flaschiboi7189]

It didn't work for me. First it said "[deprecation] Running tailwindcss without -i, please provide an input file." provided an input file (-i style.css) and I just got 420 Lines of CSS (it should be around 300000) this is pretty annoying. Can you help?

[@thi-m10]

Just place the -i tag before the input css file path. Example: build -i ./src/style.css (... rest of command)

[@codewithdary]

Thiago for president :)

[@amalamaggie]

@@thi-m10 bro please let me know when should I include -i ? For me too the same problem

[@thi-m10]

@@amalamaggie between BUILD and INPUT FILE PATH. "build -i style.css", for instance 😉

[@kubagostkowski2337]

Hello I have some problem with Tailwind. Running tailwindcss without -i, please provide an input file. - maybee someone know what i need to do with this error?

[@codingcody]

same!

[@codewithdary]

Tailwind has recently released version 3.0, which changed some things up. Here is the correct installation for Tailwind now: Run the following two commands in the CLI: npm install -D tailwindcss npx tailwindcss init Configure your template paths inside the tailwind.config.js file: module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], } Add Tailwind directive to your CSS file: @tailwind base; @tailwind components; @tailwind utilities; Start the Tailwind CLI build proces: npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

[@amalamaggie]

@@codewithdary Hi bro, I tried this, but still I get an error that specified input file ./etc/input.css does not exist

[@amalamaggie]

@@codewithdary I can't thank u enough bro!.. keep up the great work 👍

[@lunamaibach2810]

What is that extension with the emojis in your terminal? I want to download that too!

[@codewithdary]

Here you go! github.com/ohmyzsh/ohmyzsh/wiki/Themes

[@zerochu3599]

hello! may i know what is your terminal theme? It looks cool!

[@codewithdary]

Here you go: ohmyz.sh/

[@someuserouthere]

Thank you so much!

[@codewithdary]

You're welcome!

[@proteus1]

Impossible to install on my imac, even if I follow exactly..no such file or directory.

[@codewithdary]

Doesn't have anything to do with your iMac, check the difference with their official documentation right here: tailwindcss.com/docs/installation

[@graham11545]

I did not get any package.json

[@nizz4m]

me too After install the tailwind, my folder was empty

[@mateboros952]

delete package-lock and type in terminal npm init

[@nizz4m]

@@mateboros952 now its working.thank you.

[@dreidgon]

For me it was that the npm was not up to date,so I upgrade it with npm install npm@latest -g

[@manto7]

Am I the first one to comment?

[@codewithdary]

I guess so :)

[@valentinfigueiredo]

why you dont do npm init? thanks

[@jessica-tv6ep]

just do npm init if you want. I did it too before installing tailwind and other dependencies

[@developers_hub]

css classes not working man

[@codewithdary]

What’s going on?

[@dnlcorona]

I have the same problem, what did you do to solve?

[@pucksheet4456]

Why I cant type shit on my terminal