01: Setting Up Tailwind CSS v2.0 - Tailwind CSS v2.0: From Zero to Production

[@ThaRealIansanity]

I had to make a couple of changes to get this working with tailwind 3 and thought I'd share in case it helps anyone else. package.json versions installed February 17, 2022 "devDependencies": { "autoprefixer": "^10.4.2", "postcss": "^8.4.6", "tailwindcss": "^3.0.23", "vite": "^2.8.3" } tailwindcss.config.js content section content: ['./*.html'] index.html instead of a link tag for tailwind.css, it should be a script tag with type="module". The module part is important. Without it you will get a error in the browser.

[@gagedavis4242]

dude I could not figure out why it wasnt working and this is the exact solution for people like me using tailwind in 2022 thank you so much!

[@steve-y6z1l]

You are a life saver, thank you!

[@steve-y6z1l]

I wonder why this is not shown in the tailwind website

[@thefamousdjx]

I was almost like oh just another tutorial that doesnt work till i saw this

[@chris_dillon]

Welcome to modern web dev!😀

[@DodaGarcia]

You’re so positive and fun to watch!! I can’t wait to start using Tailwind

[@Virtualmix]

If you get: `[deprecation] Running tailwindcss without -i, please provide an input file.` You should use: `npx tailwindcss-cli build -i css/tailwind.css -o build/tailwind.css`

[@vuyomhlotshane4899]

thank you

[@siddharthpandey7646]

legend -- thank you so much.

[@jessica-tv6ep]

this should be pinned! thanks!

[@craigburton4447]

Mate, thank you.

[@zahidshowrav]

but now this command is working: *_npx tailwindcss -i css/tailwind.css -o build/tailwind.css_*

[@kimanjepatrick4656]

Tailwind is so cool, utility classes feel so natural . It's also worthy mentioning that this guy is a good teacher

[@dericortiz2713]

I had problems getting tailwind to work from this outdated tutorial. What fixed it for me was setting the path to my index.html in the content: [] section of the tailwind.config.js file. Hope that helps anyone viewing the tutorial in the present day!

[@goncalodumas]

Great job documenting and providing an easy path to Tailwind CSS.

[@kevinstephens1039]

I thought you should know: I have been trying to get a vanilla Tailwind 3.0 project up and running for three days now, pulling my hair out with other instructional videos - every one I could find - just trying to get a base project built. My problem was that my 3 base layers weren't being replaced by css through the build script. Your video mentioned using npx tailwindcss-cli as the command to run, I popped that into my script, and it worked!!! Thank you so much. Other scripts and instructions don't mention to add the command line interface option, -cli, to the command. Thank you Thank you!

[@yathavanyogarajah]

I also have the same problem, How you fixed it?

[@wagmicrypto173]

I was having the same problem. With my 4 years of CS experience, I knew someone might have answered this in the comments. Came directly to your comment :D

[@dlwijerathna]

/** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }

[@dlwijerathna]

"scripts": { "dev": "vite" },

[@ranibenmahmoud6298]

i fell in love with tailwind. please more example and more details. I can't wait to see even hungry to learn more and more. thank you very much for this gift.

[@nullzero9224]

Excellent introduction. However , what I could not understand after set up process is the deletion of build folder which include the output CSS file we used when we build the framework @4:22. It did not work out with me until I used the output css file and link it in html page

[@MrErkout]

He didn't blink once.

[@simonswiss]

HAHAHA I really cannot blink while talking to the camera LOL. I tried I swear. I blink a lot between on-camera scenes 😆

[@n6v7d8]

he did, behind those cuts xD

[@yevheniikravchenko5634]

aaaaaa, now I'm only looking at his eyes :)

[@yevheniikravchenko5634]

Blinked at 3:23!!!

[@IanaCaldas]

Yep, I guess I have a new fav CSS framework. Sorry, Bootstrap. :P

[@jonasow9080]

yep same

[@VS257]

Tailwind CSS is too complicated to install and setup WTF

[@jonasow9080]

@@VS257 Hey, thats what i thought at the beginning too. Its really worth it though. Maybe look into NetNinjas Tutorials!

[@VS257]

@@jonasow9080 The installation and setup from NetNinja doesnt work anymore and is outdated. Though, once I set it up with the updated installation (somehow), i'll continue to watch his series. It's more complicated now than what Net ninja did a year ago and I wish NetNinja would update it !

[@jonasow9080]

@@VS257 I recently tried his installation and it worked. Are you sure?

[@nikolasosvalds1471]

I had to add content: ['./index.html'] to the tailwind.config.js file to get this to work. Is not covered in the video. May be related to v3?

[@voducthang16]

I following the video and it doesn't work. Can you help me

[@jax7916]

Thank you for this mate. Now I'm up and running!

[@pavelsjo]

Works for me thanks

[@zhigu9930]

Thank you so much. I’m confused why it can’t work even I watched every second of this video

[@olivebishop3794]

@@pavelsjo not working for me

[@freemanjiang]

After faithfully using Chakra UI for the past 6 months I’m moving to Tailwind and happy:)

[@valirjonathan2161]

Awesome lessons. Now I can start learning tailwind css faster with proper workflow.

[@தமிழோன்]

Finally no more CSS overrides! Goodbye Bootstrap, Material UI, Bulma, Semantic UI, and many other CSS frameworks that need heavy overrides for maintaining individuality! 😁

[@mollyTheDog510]

1/29/23 - I'm using tailwind 3.2.4 and the tailwind.config.js file is different from the one shown, and seems to work differently. At this point, towards the end, at about 8:24, the transformed tailwind.css file does not automatically get loaded into index.html, until I added "./index.html" to the module.exports, content array. After adding that then the transformed "tailwind.css" is loaded into index.html.

[@nullzero9224]

I run into same problem - I used the output CSS file instead of deleting it like in video

[@felipecardosodeoliveira5530]

tks, my works after do this: content: ["index.html"],

[@rathesungodwillremovethepe8747]

The link to tailwind cdn doesn't exist...Even if you follow the video step by step, the install fails with npm ERR!

[@ReadyDesignerOne]

Thank you, the rest of my weekend is sorted ;)

[@ko-Daegu]

would love if you share your setup with what plug-ins do you use and theme

[@nicholasyoa86]

I have to say: thank you so much, your docs itself are so detailed and as well as that you have videos to guide us - I don't think there's anything else I could personally ask for, thank you! As a student, this is so helpful in seeing how efficient I can make my project, and to make sure I get the most out of tailwindcss as possible. I've never found something so easy to use that's customizable and has so many uses about it. Anyways with that out my system, I'm DEFINITELY using this for future projects!

[@influencersdelightxx]

if you get an error using the tailwind-cli, try `npx tailwindcss-cli@latest build css/tailwind.css -o build/tailwind.css` instead.

[@johnsoto989]

Thank you!!

[@ko-Daegu]

this actually worked for me why thou?

[@tisadiniossiana9643]

I found gold! Thank you so much man. You help my learning a lot. Keep up your excellent video😊

[@JatanPorecha]

What are these fonts / styling of VSCODE .. looks awesome

[@a7medalyousofi]

Great CSS Framework, Could you please share your vscode extentions and theme, I really like it.

[@linusjklett]

Did you find out what he used?

[@longgongzi99]

6:39 Setup with yarn/npm

[@ajdinzutic]

what VS Code plugin shows the build output like in 6:30? looks really cool and the colorpicker.

[@hichem9193]

Hey great tips as usually .. Thx .. BTW which extension do you use for preview ?? I've tested some but didn't work ??

[@NishantSingh-rz9jt]

+1 Want to know the preview extension

[@Mikkysam52]

@@NishantSingh-rz9jt It is HTML Preview

[@NishantSingh-rz9jt]

@@Mikkysam52 Can you share the link to the extension? So many with the same name. Also, does this only work for static HTML files?

[@VaibhavShete]

It has to be something like Browser Preview ( marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview ) which starts 'chrome headless' and renders its output stream in vscode, essentially like a chrome instance inside vscode. You then enter into it the url given by the vite server (e.g. localhost:3000). (Things like HTML Preview won't work because it doesn't look to compile all the css. It just runs plain HTML with its own styesheet.)

[@DavePerth]

@@VaibhavShete Not working for me - it is the correct one, external browser works, but this one just shows a blank screen - I've restarted editor!

[@sanketss84]

Can someone please share how the Preview magic is working so cool here. I read the comments but its not working for me. :(

[@marcobrettschneider4359]

Will there be a new series for v3? I'm looking for tutorials but it looks like no one has created something. Would be great to see something similar from the creators of Tailwind CSS. I discovered it today and am eager to learn this awesome library!

[@davidomar742]

you want him to explain the same shit for v3? its the same shit. read the docs for fucks sake

[@iqdev4233]

I love tailwindcss and your great tutorial. Best ui library and video

[@ascyrax8507]

if npx tailwindcss-cli does not work, try installing it first(npm install tailwindcss-cli) and then running the command.

[@w1-w2-w3]

I don't like Tailwind CSS at first but I am here now. Basically Tailwind CSS is similar like bootstrap but with a lot of customization. Anyway, I love it now. Because I don't want to touch CSS file at all. If someone want to test Tailwind CSS quickly, you can try in official Tailwind CSS playground.

[@nicodinh]

FIX tailwind css 3 tailwind.config.js: module.exports = { content: ['index.html'], darkMode: 'media', // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }

[@freerangerstudios]

You're a lifesaver, this saved me from several hours of debugging :)

[@davidomar742]

@@freerangerstudios maybe read the docs like an actual engineer?

[@igora4303]

[9:05] please explain. I have a problem with preview window. I can open dev server in browser, but no success with preview window. Is it some kind of vscode plugin or i\ve missed smth.? tnx

[@o-willian-fernandes]

have you found the answer? If so, can you share how you got it working?

[@igora4303]

@@o-willian-fernandes no, i have not. you can open preview window with hotkeys shift+ctrl+v (not sure) or right clicking on html file, but preview window doesn't work right though. i use browser instead, with live server.

[@ShamsulIslamSujon]

I've successfully configured Tailwindcss with Vite and it works just fine. But I wonder where does the compiled CSS file goes when I setup Tailwindcss with Vite?

[@VaibhavShete]

In a browser, select an element and go to inspect element (F12). Look where its style is coming from! (It is the very tailwind.css file that we created, but all its directives were 'fulfilled' before it was sevrved through the vite server. What's more interesting is that this only happens when it is accessed as a stylesheet - from inside a link tag. So it only looks that way if you check the loaded resources or in the stylesheet editor in Firefox. If you try to access it directly - e.g. by entering localhost:3000/tailwind.css in the address bar - it looks at it is.)

[@danquinn1773]

Think it's just stored in memory by the Vite process.

[@rshekhar11]

the quality of the video was awesome.

[@DjokovicIsOurLordAndSaviour]

It says successfully installed in my terminal, package.json shows all of the dev dependencies as expected. But, it's still not working at all. None of the tailwindcss is being applied. :(

[@sohamparate]

happened to me too but after half an hour I realized that I had a spelling mistake ('componets' instead of 'components') in css/tailwind.css for some reason vs code doesn't recognize @tailwind

[@DjokovicIsOurLordAndSaviour]

@@sohamparate Hmm, I'll double-check my spelling I guess. Thanks for the tip.

[@DjokovicIsOurLordAndSaviour]

In the end, I started from scratch using another tailwindcss setup tutorial which worked. I still don't know what the issue was to be honest.

[@rickywong9525]

@@DjokovicIsOurLordAndSaviour Hi, i'm facing the same issue too... do you mind to share the video that you are referring to?

[@cinyx1924]

I was trying to get vite running on my windows 10 with no luck. After I run npm run dev, i am getting this error message: error when starting dev server: Error: listen EACCES: permission denied 127.0.0.1:3000 at Server.setupListenHandle [as _listen2] (net.js:1301:21) at listenInCluster (net.js:1366:12) at doListen (net.js:1503:7) at processTicksAndRejections (internal/process/task_queues.js:81:21) Does someone have a solution on windows?

[@justinwinthers]

Which preview plugin are you using in VSCode? Great content, thanks!

[@chungt6545]

I'd love to know this too

[@iflux8821]

@@chungt6545 In another comment the author replied that it's a closed-source one similar to jevakallio/vscode-live-frame

[@LaravelJutsu]

By this tasty accent I would easily guess we're from the same country 🇨🇵

[@frz_akbar]

I love using tailwindcs but why extensions don't work sometimes for no reason

[@skullcrusher4244]

how did you have preview in vs code please anyone. If anyone know please share

[@chrisjrodrig]

Anyone have any idea what theme is being used? I am really liking the look of this!

[@许晓东-s2j]

tokyonight

[@cesarrotela]

Can someone share an example how to configure vite with multiple pages, like index.html, index.css, about.html, about.css?

[@ditchcomfort]

Maybe a stupid question… but can you use Tailwind with BBEdit? Or is Tailwind a seperate app? I have minimal experience, but seem very fun to learn/use.

[@lh536]

I don't know why but since I update to tailwindcss v2.2.2 and vite v2.3.8 with jit mode; it only "reads" index.html once, if I do a tiny change on index.html (after server is running) it doesn't shows the change on the browser... but if I don't use jit mode it works as before. Does anyone have the same issue? or has any clue why is this happening? Thank you!

[@cocono.1750]

What’s the font in the code editor? Really love how it render the s in “class” and the f in “href”.

[@mrsportysomil]

Dropping a comment to know this as well

[@johanapolinarioveliz6754]

It is "Dank Mono", its cursive is beautiful but doesn't have a lot of ligatures

[@cocono.1750]

@@johanapolinarioveliz6754 Thank you! Ligatures are not really important to me.

[@techieoriname]

I was about searching for this, I just searched the term "font", and now I can see someone having same thoughts lol

[@shrikantjha5630]

Good work. I was looking for it.

[@pixelbakery]

How's he getting emojis in his terminal??

[@NAVEENKUMAR-th5hf]

All the steps are working fine and looking for advanced

[@tesfayeyimam3700]

any help why the ctrl+K, V shortcut for the preview is not working on my Ubuntu 22.0 ......

[@k16e]

What's the size of tailwindcss.min.css? If that is loaded on a basic html setup w/o purge, how bloated/not will it be?

[@richardhoyle7778]

I have tried to do this in Laravel that has the tailwind CSS all setup already however it will not work. none of the class commands the text-4xl the font-bold or the text-blue-5oo the only one that appears to, is the text-center but even that is questionable. To my knowledge the tailwindcss you are using and that is used in Laravel 8.61.0 art the same however I am not able to get the colors to work or any of your class file's. Need Help What Do I do to get this to work in Laravel 8. ?

[@preetsojitra2650]

After running "npx tailwindcss init -p" it is showing an error message that "tailwindcss is not recognised as internal or external command".What should I do now?

[@shibi6939]

someone can help? when i switch cdn link to local file, the styles donot work! so sad.

[@gantamk]

I am 12 year old, using my father's machine and learning tailwindcss. I am getting the below error. up-and-running: The term 'up-and-running' is not recognized as a name of a cmdlet, function, script file, or executable program.

[@cafuune]

having trouble installing it, ive done everything correctly but it keeps saying that "Specified input file css/tailwind.css does not exist." please help!!!

[@a7medalyousofi]

What the theme that you use for zsh, icons... etc

[@RobBoydston]

Hi. I can render the Hello World page via a local server, but it's not live-updating as I make/save changes in the markup. It will render the changes upon browser refresh though. It's just not live. Any hints or suggestions? Thank you.

[@willyframadhan]

Why is my output css file only generating @tailwind base? The components and utilities are not generated

[@pratyushkumar5740]

can i add tailwind css to normal html js project for production, if yes what is the procedure and how can i use jit mode in that please tell, as i want to start one project for my company

[@pedromartindelcampogonzale9613]

Great video, really useful. I recommend to use an anti popper filter for the microphone 😉 🎙️

[@williamharvey8219]

One more question if i may, How did you get to show the live preview on the right panel?

[@andersonchong7625]

hoping to know too

[@welinafarah426]

​@@andersonchong7625 VS Code extension is called "Quick HTML Previewer" by daiyy

[@andersonchong7625]

@@welinafarah426 thank u

[@calebruth]

@@welinafarah426 thanks!

[@ajdinzutic]

@@calebruth It got a better one. Just "HTML Preview" :)

[@ElCidPhysics90]

Will this ever be usable within Visual Studio - not VS Code, but the full IDE?

[@skullcrusher4244]

how open preview is in vscode please anyone

[@Rufusem]

Are you using Visual Studio Code or the IDE?

[@raidenminato]

It says from scratch, but completely skips any information on tools or extensions used.

[@shahsaumil7929]

then you are too noob to code

[@JosePerez-qt8cf]

Thanks for the explanation, but how do I do to add the color palette to extend it the default?

[@felipepalmacastro]

Beautiful. Beautiful. Beautiful. 👌

[@devsip2277]

Which plugin you are using for the VS preview?

[@Buffalo_Debile]

npx : The term 'npx' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.

[@harrisoncramer]

You'll need to install npm (which is a node package manager, that ships with the npx command)

[@JustinByrne1337]

Anyone know what plugin is used to get the preview that he has on the right hand side?

[@yukiryu8530]

hi. first time i follow this video i can install tailwindcss but when i want to make my own i try install it works but file package.json is missing. why is like that and how to fix this? first time follow this video try install in desktop folder and when i make my own i try install in laragon local server folder.

[@nihaalprasad7049]

When installing Tailwind, i get this line in the terminal "[deprecation] Running tailwindcss without -i, please provide an input file." Is it something to be concerned about?

[@vishaladhithya1553]

use: `npx tailwindcss-cli build -i css/tailwind.css -o build/tailwind.css`

[@nabeelahmed7754]

Please tell me the font name you are using in your editor. It looks very beautiful to me :)

[@yogeshbhaleraoyeola]

I got this error after running build command Unexpected token = please solve this for me

[@AguiaPC]

What is the name of the font you are using and the theme?

[@princepatrickc4611]

hey @Tailwind, I can't do the terminal thing on my machine. I can't create the "build" folder tho I'm following the instruction.

[@zahidshowrav]

Try this command _npx tailwindcss -i css/tailwind.css -o build/tailwind.css_

[@rohitak4792]

tailwind has dependence on node js version ?

[@enesbala5195]

Can we use this guide to learn Tailwind 3?

[@TailwindLabs]

Hey! Lessons 02 to 07 are still very relevant for Tailwind CSS v3, but the setup step has changed a bit. You can. ignore the last lesson since Tailwind CSS v3 does not use Purge CSS anymore. For the setup I suggest you take a look at the new content configuration documentation - you'll need it to get started: tailwindcss.com/docs/content-configuration

[@enesbala5195]

@@TailwindLabs thank you. I figured it didnt work when I tried to set it up yesterday and it didnt update. Thank you for the course though. I really hope to find time these days to learn more about tailwind

[@tangikuu]

Did you add the .hello class to you r html?

[@AndersonVazz]

What's the plugin used to preview within VSCode?

[@TailwindLabs]

Little custom thing we made just for screencasts like this, haven't open-sourced because not intending to develop it or maintain it. This is basically the same though: github.com/jevakallio/vscode-live-frame

[@AndersonVazz]

@@TailwindLabs nice, thank you!

[@sunsande]

@@TailwindLabs But could you please elaborate on it? How do you show the screen size in pixels? How do you change the resolution when you click on the breakpoints definitions in the JSON file? These features are not part of the vscode-live-frame

[@modz9711]

Hey can anyone explain me the best and easy way to setup tailwind and start using it...?? (Other than the cdn method)..? Kinda confused..! ? Thanks in advance.

[@jeirsenlopera188]

whats the minimum node js version we can use to run the tailwind css cli?

[@tolueniolorunda6006]

Are you going to have to do this all the time?

[@Valduks]

I run into this error and nothing seems to be wrong, but nothing works either... npx: installed 136 in 7.716s Unexpected token { I was following each and every step exactly like in the video... My npm version: 3.5.2 My npx version: 10.2.2 This is the most recent I could find...

[@snookems17]

I get an error evertime I use npm init -y

[@edtechph79]

hello sir. what code editor are you using?

[@olivebishop3794]

vs code

[@HJ-su7px]

I can't find pt-1 ... (utilities) and (base)

[@afeahdemefa564]

Which editor are you using?

[@kowshiki2574]

What editor you have used

[@ZeldriFR]

Do someone knows his color theme in vscode ? Looks pretty good :D

[@benniewentzel6775]

Night Owl confirmed. twitter.com/simonswiss/status/1362952282082435072?s=20

[@simonswiss]

@@benniewentzel6775 🌌🦉✅

[@amatakchannel3735]

thank you so much, it's so helpful!!

[@ijazDeveloper786]

my npm run dev command is not working can you please guide me

[@kernelpanic901]

Following this tutorial, but my project does not recognize the @tailwind base/component/utilities directives in the css file... any ideas?

[@kernelpanic901]

Msg in VS Code is "Unknown at rule @tailwind" - I guess it still all works, just VS Code doesnt know what @tailwind is.... there must be some extension that "fixes" that

[@darkodujin2183]

You can turn off that. Go to VS Code Settings, find CSS, find CSS>Lint:Unknown At Rules and select the ignore option.

[@owenmelbourne9602]

@@kernelpanic901 there's a tailwind intellisense plugin which adds fullish tailwind support to vscode

[@simonswiss]

You can install an extension for "postcss-language" and change the language mode for your CSS file to PostCSS so vscode stops complaining 👍

[@eskimo6097]

Why did you delete the build folder? It contains the processed tailwindcss. I don't think that should be deleted, or else it won't work

[@olivebishop3794]

i deleted mine doesnt work

[@learnwithmehady4040]

command not found: tailwindcss-cli. what can i do now

[@SupraKooper]

I don't understand like... at all. Can someone please explain to me how to implement Tailwind in an actual project? Am I supposed to do this every single time I want to use tailwind in any project? Seems like an extremely annoying hassle when you can just copy the CDN stylesheet like firebase/firestore,bootstrap, etc....

[@williamharvey8219]

What editor is being used on this demo?

[@raulguichard]

Visual Studio Code

[@williamharvey8219]

@@raulguichard thank you!

[@iflux8821]

@@raulguichard Do you know what extension is used for preview?

[@iflux8821]

aha, now see the author's reply below.

[@apdy27]

Which font is that?