Anyone who want to add autocomplete: - Install: Tailwind CSS IntelliSense extension in VS code. - Open your settings.json file then add this to get the intellisense working on all files: "tailwindCSS.includeLanguages": { "html": "html", "javascript": "javascript", "css": "css" }, "editor.quickSuggestions": { "strings": true }
Same, but the old HTML attributes and tags had the disadvantage of not being reusable or versatile at all. Since this is still CSS, you can change a color in one place and still have it change everywhere, which was impossible back then with color="red"
@@RemizZ That works if you use the same color, but in a slightly different shade. If you need to use a completely different color (e.g. red to blue), or even a different saturation (e.g. red-900 to red-800), you still have to change it everywhere.
This paradigm really shines when combined with markup components (like React components, for example) not only do you avoid repetition, the level of flexibility you have is unmatched with external or inline css. For example, in a React component, as an argument you can accept the size of a button (let’s say small and large) and only conditionally add/remove utility classes right from the view without messing with ugly and frágil css styles. It’s awesome.
@@vladutcornel That depends, when you also use color-primary-xxx and then change the primary color from blue to orange, you do not have to change the stufff. What I mean: You define blue and orange. Then you do: primary = orange.
Should've done it with some different design tho. I coded up the same thing with TW2 and it had virtually no difference at all. You can easily follow Adam coding up the same thing with TW1 and it will be the same.
So, that's a fair point - but the idea was to give this course a refresh. A lot of things have changed since the original course (setup steps, built in Purge CSS, variants.exend, ...) so we needed an up-to-date version of this material.
What vscode extensions do you use for tailwind autocompletion? I tried "Tailwind CSS IntelliSense" but it isn't working. Or are you using a different extension/editor?
You have to include the language you are using in your tailwind config file. A quick google search should help you out. Look for "tailwind included languages".
@@goodluck_charliee Thank you. I have already Vite dev server of tailwind css as he described previous startup video of tailwind, do I face any conflict between these two. I also want to know what type of preview is he using above video. I also have 'browser preview'. Is it same of Live Server?
@@abhilashoommen4704 The Vite dev server is the one he's using. Since I have Live Server as well and was actually running it before we got to the Vite dev server walkthrough I can confidently say that there isn't a conflict between the two.
@@DerickMasai when I open vite, it loads the index.html on a new safari tab. How do I get vite to open within VSCODE in the same manner in the video? (it's displayed to the right side of the code)
@@iamthekingofchoco He mentioned in another video that that is done by an internal tool at Tailwind. Not sure on this though but he also mentioned they would release it once it was stable.
I did the same code with different images and logo.The page content is not centered.I feel like there are other parts missing. but I appreciate very much these efforts. Merci beaucoup pour les efforts que vous etes entrain de faire.J'ai compris que vous parlez le francais depuis le depart. :p
I know it's been a while but I'm facing the exact same issue. Could you find a way to center things the way he did on the video? On the Tailwind documentation they suggest using flexbox or grid. But somehow his did without adding any flex attribute.
I like how you explain some design concepts along the way when you are styling the components.
Terrific! Bite-sized code-along tuts, perfect to show us how Tailwind makes CSS intuitive and fast. Loved the bonus design tips...already used a few
Excellent tool and the supporting content like this is just amazing
i don't understand why the div appears centered in the body, you didn't specified that in any place
I was wondering exactly that, I don't get it. Any idea?
Anyone who want to add autocomplete:
- Install: Tailwind CSS IntelliSense extension in VS code.
- Open your settings.json file then add this to get the intellisense working on all files:
"tailwindCSS.includeLanguages": {
"html": "html",
"javascript": "javascript",
"css": "css"
},
"editor.quickSuggestions": {
"strings": true
}
I am old enough to remember the < font > HTML tag and people telling me I shouldn't mix styling and markup.
Guess it's full circle now.
Same, but the old HTML attributes and tags had the disadvantage of not being reusable or versatile at all. Since this is still CSS, you can change a color in one place and still have it change everywhere, which was impossible back then with color="red"
@@RemizZ That works if you use the same color, but in a slightly different shade.
If you need to use a completely different color (e.g. red to blue), or even a different saturation (e.g. red-900 to red-800), you still have to change it everywhere.
This paradigm really shines when combined with markup components (like React components, for example) not only do you avoid repetition, the level of flexibility you have is unmatched with external or inline css.
For example, in a React component, as an argument you can accept the size of a button (let’s say small and large) and only conditionally add/remove utility classes right from the view without messing with ugly and frágil css styles. It’s awesome.
@@vladutcornel That depends, when you also use color-primary-xxx and then change the primary color from blue to orange, you do not have to change the stufff.
What I mean:
You define blue and orange.
Then you do: primary = orange.
Nice , after watching this video I decided to use Tailwind in my new project. thank you!
How did you get the autosuggestions?
I just noticed this channel is actually Tailwind Labs channel.
Wow! Really good content
Привіт цікаво переглянула дякую за відео
Very cool..Keep these kinds of examples coming. they are very useful for learning Tailwind CSS.
I am intrigued by the extension name of his html preview. If you don't mind to share it'll be great.
@@ZulluBalti I think that one is the tailwin css intelliSence try it and when you hover the class click on ctl, it may work.
"Browser Preview" extension
Great CSS Framework,
Could you please share your vscode extentions and theme, I really like it.
looks like the nightowl theme, extension is likely "Tailwind CSS IntelliSense"
How did you get Preview inside Vs-code. If anyone knows please tell.
Very good staff for beginners, thanks
Nicely thought-out platform. 👏👍⭐️
You explain so well. Do you teach somewhere that i can learn?
Should've done it with some different design tho. I coded up the same thing with TW2 and it had virtually no difference at all. You can easily follow Adam coding up the same thing with TW1 and it will be the same.
yeah I'm a big tailwind believer, but why recreate the whole workcation series already done so well by Adam? The sexy French accent?
That's the only bad thing about this series
So, that's a fair point - but the idea was to give this course a refresh.
A lot of things have changed since the original course (setup steps, built in Purge CSS, variants.exend, ...) so we needed an up-to-date version of this material.
@@TailwindLabs I still say it's all about the French accent ;). Keep up the amazing work. Cheers from the 905.
Does anyone know why he surrounded the anchor in a div to make it display block instead of telling the anchor itself to be display block?
Extra div is unnecessary, especially when we use inline-block for the anchor
what was the reason for the inline-block on the a tag?
the a tag has ‘display: inline’ by default. We need to change it to inline-block or block to give padding
thanks, great video to start with TW VERY WELL EXPLAINED THNKS
Loving this series 👍
What vscode extensions do you use for tailwind autocompletion? I tried "Tailwind CSS IntelliSense" but it isn't working. Or are you using a different extension/editor?
You have to include the language you are using in your tailwind config file. A quick google search should help you out. Look for "tailwind included languages".
Tailwind CSS IntelliSense
add this to the VS Code config:
{
"tailwindCSS.includeLanguages": {
"plaintext": "html"
}
}
@@nikitalive3845 Thank you so much. That helped a lot.
do i need to install anything in order to have them autocomplete suggestions on vscode? they don't show up for meg
@@nplayon fantastic! thank you king
Great tutorials 👍
@@kernelpanic901Awesome!
Hi, which preview extension are you using?
Same ask
What 's your vscode font name? It's very beautiful
how to take live preview. I am using visual studio code, and installed 'html preview' . But its not work with tailwind. Help please!
you have to right click and use live server for html preview
@@goodluck_charliee Thank you. I have already Vite dev server of tailwind css as he described previous startup video of tailwind, do I face any conflict between these two. I also want to know what type of preview is he using above video. I also have 'browser preview'. Is it same of Live Server?
@@abhilashoommen4704 The Vite dev server is the one he's using. Since I have Live Server as well and was actually running it before we got to the Vite dev server walkthrough I can confidently say that there isn't a conflict between the two.
@@DerickMasai when I open vite, it loads the index.html on a new safari tab. How do I get vite to open within VSCODE in the same manner in the video? (it's displayed to the right side of the code)
@@iamthekingofchoco He mentioned in another video that that is done by an internal tool at Tailwind. Not sure on this though but he also mentioned they would release it once it was stable.
Which extension are you using in vs code for tailwindcss code completion??
i found this one during search: Tailwind CSS IntelliSense
Nothing about node/npm/vscode extensions and other details that would make it easier for a first-time beginner to follow.
I did the same code with different images and logo.The page content is not centered.I feel like there are other parts missing. but I appreciate very much these efforts.
Merci beaucoup pour les efforts que vous etes entrain de faire.J'ai compris que vous parlez le francais depuis le depart. :p
I know it's been a while but I'm facing the exact same issue. Could you find a way to center things the way he did on the video? On the Tailwind documentation they suggest using flexbox or grid. But somehow his did without adding any flex attribute.
update like this
'flex justify-center' either body or div, don't know why his is automatically centered lol
Hey! What 's your vscode font name?
dammm. this is amazing.
thx, this is useful stuff
This is super helpful :)
this tutorial is similar with the one that Adam Wathan make on his channel
Hie i like your text editor font, what i the font name? where can i buy or download it?
comic sans ms
👍🏻👍🏻👍🏻
poggers