Hello, 1) In your project folder install the tailwind as usual, 2) leave your tailwind.config.js as you see fit, but including jit mode mode: 'jit', purge: { content: [ './Client/**/*.razor', './Client/**/*.html', './Client/**/*.js', ], }, ... 3) Run npx tailwindcss --output Client\wwwroot\css\tailwind.css --watch and will be listening when you are modifying your code
literally have spent an hour setting up tailwind, emmet, and intellisense... and now this. there is no way anyone can ever argue against tailwind again. there is literally no excuse to not use this in 2022
thanks for sharing the process of building custom design, many tips & tricks learning from here 👏 Working with tailwind was so strange at first, but now I am simply in love with it, really enjoying tailwind css ❤
Dear Simon, the videos you make are totally awesome! The way you explain and code feels so relaxing and make it enjoyable. Keep up the great work!!! I appreciate how to explain the design guide process usign tailwind which is such an important topic.
At first I was really reluctant about Tailwind, specially because it makes me sick when you have that much text on your HTML. But it just conquered me, it's inevitable. And this guy is really awesome, top quality videos, he really makes you wanna get to work with Tailwind
Tailwind is my favourite design system. I request you to make series of videos on 1. setting up Tailwind with various frameworks in whatever possible ways 2. explaining internals of tailwind 3. creating final minified css file When I am working with Tailwind css, it's hard to troubleshoot any issues because I know tailwind at a very high level and docs aren't enough out there
Can anyone care to explain why we should rem instead? I mean I know it would take our base root size as their "parameters" but I mean still, why? I don't think it could scale pretty good especially on larger screen size? (I sometimes using vw unit and calculate it based on what px value was it given for a specific screen design i.e.: 1440px or 1920px and just like simply divide it by percent)
Nothing to say about how amazing this is. Every video I watch about tw amazes me a lot! That said I'd like to know where I can find Figma's best practices and design systems like this one you use for training/practicing purpose.
I wish that the designer could handover the font sizes in "rem" unit. Basically I do it my self, then setting the font size on html element for screen sizes, is enough to change the font size on the other elements.
Anyone has any idea how to create the background colors and shapes used in the design showed in the video ? I see these type of blurry/gradient in a lot of design websites like dribbble but I have no idea how its actually done in html/css
@@TailwindLabs Oh god... That was the least expected answer I was waiting for! Are you seriously talking about using like a big image, or a multi part / sliced image glued together with positioning and all that ? But these type of backgrounds are so seamless, they don't seem like an image to me
this is why i just replied to a comment earlier asking for the source code for this video , the gradients , we want to know how you achieved that , its positioning, responsiveness and how it should be used @@TailwindLabs
I'm not sure if it's an easy simple project. But I see that in 2022-2023 the sites are going for easy designs. While I was doing somekind of complicated ones in the past.
Ser please can we get the figma file of this project!! Congratulations on successfull proTailwind workshop 🎉 and best wishes for the new journey ahead 🤘
love your videos but I rather have vanilla css mixed, like a nontailwind css especially for links if they going to be all the same. I like tailwind but feel it is more work at some point. you have to set it up on all the time. I mean I will use it for break points makes that easier most the time lol
@@Ikram-Hussain bro just recomend you do not install italic font for Dank Mono, it bugs on some letters! Install just regular version and enjoy the style.
Hello, thanks for the tutorial, but I have a question: According to the chart, every h2 in the app will have 'font-black text-purple font-satoshi text-2xl tablet-text-4xl', so why not style every h2 in the app with @apply instead of copy/pasting all the classes in every h2? (Same for other headings/etc).
Ideally you'll create a component (react, vue, etc). Applying styles globally is not a good idea because in a large project you'll encounter conflicting styles sooner or later.
@@isimvol not everyone is using react, vue etc. Creating a component is not an option for all cases. Global styles are very useful and there are no conflicts. then your system has issues
![Advanced TailwindCSS Techniques You Have To Know?! [8 concepts]](http://i.ytimg.com/vi/LHYqKEtD-Co/mqdefault.jpg)
Give the UI designer a raise for providing all the typography and colors etc.
Please make a video where you share your Visual Studio Code settings, themes, plugins, etc. Your setup looks so clean and professional!
+1
+1
+1
+1
Hello,
1) In your project folder install the tailwind as usual,
2) leave your tailwind.config.js as you see fit, but including jit mode
mode: 'jit',
purge: {
content: [
'./Client/**/*.razor',
'./Client/**/*.html',
'./Client/**/*.js',
],
},
...
3) Run
npx tailwindcss --output Client\wwwroot\css\tailwind.css --watch
and will be listening when you are modifying your code
I love the fact that you use accessibility and semantic markup when implementing design! 🔥
Could we please get the figma file and the completed project files? As a beginner it would really help out trying to build this.
+1
+1
+1
Got anything yet?
+1
Love your intros and outros and the effects that you add. Makes learning that much more fun! Thanks, Simon!
I love making these intros and outros, so this is a win-win!
literally have spent an hour setting up tailwind, emmet, and intellisense... and now this.
there is no way anyone can ever argue against tailwind again. there is literally no excuse to not use this in 2022
thanks for sharing the process of building custom design, many tips & tricks learning from here 👏 Working with tailwind was so strange at first, but now I am simply in love with it, really enjoying tailwind css ❤
Dear Simon, the videos you make are totally awesome! The way you explain and code feels so relaxing and make it enjoyable. Keep up the great work!!! I appreciate how to explain the design guide process usign tailwind which is such an important topic.
I'm glad I was able to help 🙏
At first I was really reluctant about Tailwind, specially because it makes me sick when you have that much text on your HTML. But it just conquered me, it's inevitable. And this guy is really awesome, top quality videos, he really makes you wanna get to work with Tailwind
Amazing video as always! I love the time and care put into each video!
Thank you for the effort that you put into this video🌼.
That jump to feature was so satisfying. I wish we had it in the real world too😄.
Ah yeah this is a pretty useful magic trick - love to use it when deadlines are getting too close 👍
As a beginner I learn a lot from your channel. Hopefully more into designs tutors from Figma to Tailwind CSS. Many thanks.
This workflow seems VERY professional. Thanks for sharing that.
It would be really cool if you could share the style guide document so we can use it as a template in the future
The most important video when you start a tailwind project
That intro though.. 🔥
Great video - and you sound great with that ICON Pro too!
Tailwind is my favourite design system. I request you to make series of videos on
1. setting up Tailwind with various frameworks in whatever possible ways
2. explaining internals of tailwind
3. creating final minified css file
When I am working with Tailwind css, it's hard to troubleshoot any issues because I know tailwind at a very high level and docs aren't enough out there
I really liked the intro music !
Make the header section please, i'm really curious how you make the gradient background
At 4:30, why are you defining the font-size in px instead of rem and line-height in px instead without a unit? Just curious.
🔥🔥🔥🔥🔥 as always, huge thanks for awesome 😎 videos
I loved it.
Great work as usual.
fun to watch and educational as always!
super cool sir, this is make development easier
Liked and shared before start watching. Keep up the great work, full respect 🙏
I love this tutorial, it would be really useful though if you could also share the design guide so that I can try these things myself against a guide.
Awesome Simon!!!, Your videos are best I've seen on youtube, I loved the sound of super mario 🍄.
Do you have the style guide somewhere where we can view it? It seems like a great starter point for designers. Thanks!
Should we be using rem for custom font sizes, even when the designers give us px?
Good question! I think converting pixel values to rem is good practice, and I believe it also helps some assistive tools.
Can anyone care to explain why we should rem instead? I mean I know it would take our base root size as their "parameters" but I mean still, why?
I don't think it could scale pretty good especially on larger screen size? (I sometimes using vw unit and calculate it based on what px value was it given for a specific screen design i.e.: 1440px or 1920px and just like simply divide it by percent)
Nothing to say about how amazing this is. Every video I watch about tw amazes me a lot! That said I'd like to know where I can find Figma's best practices and design systems like this one you use for training/practicing purpose.
If only I could like twice, I love tailwind css.
can you place the colors like you did and also create variable color system attaching "primary-button (color)" etc?
I wish that the designer could handover the font sizes in "rem" unit. Basically I do it my self, then setting the font size on html element for screen sizes, is enough to change the font size on the other elements.
I love this guy ❤️🌚
Love your microphone!
Hi! Are you using VSCode? Which plugins are you using? Especially the ones which help with tailwind
Good, subscribed!
hey do you know which theme and font used in this video
@@Ikram-Hussain I have no idea
I want to design only for Desktop version how can I disable the responsive when resize screen?
This was very helpful 👍👍
which font you're using for vscode ?
Im still seeing that NOW! Power punch 🤜
What's the vsc color extension at 3:26?
I'd love to know that too!
I think it's Color Highlight by Sergii Naumov
@@ninecrowns7092 Yep, that's it!
How can I configure editor to bring the suggestions as you have?
Hey! This is the vscode "Tailwind Intellisense" extension - if you're using vscode, installing that extension will work without any setup!
Any place I can download free style guide documents just to practice my web design and dev?
This is probably asked a lot, but what is your VScode theme name? Really like it! :)
hey do you know which theme and font used in this video
Monokai Pro I believe
Anyone has any idea how to create the background colors and shapes used in the design showed in the video ?
I see these type of blurry/gradient in a lot of design websites like dribbble but I have no idea how its actually done in html/css
The secret is simpler than you'd expect - the tag 😄
@@TailwindLabs Oh god... That was the least expected answer I was waiting for! Are you seriously talking about using like a big image, or a multi part / sliced image glued together with positioning and all that ?
But these type of backgrounds are so seamless, they don't seem like an image to me
this is why i just replied to a comment earlier asking for the source code for this video , the gradients , we want to know how you achieved that , its positioning, responsiveness and how it should be used @@TailwindLabs
Great content. Thank you very much!
Great Components
how did you get that background color/image
can anyone helpme with that
As always top notch
Excelente Video gracias infinitas
Amazing❤️
handy video thanks!
That is what I was looking for.
can anyone tell me which font and theme were used on this video?
please😍
I'm not sure if it's an easy simple project.
But I see that in 2022-2023 the sites are going for easy designs. While I was doing somekind of complicated ones in the past.
hi, is it possible I can have the Figma file?
Ser please can we get the figma file of this project!!
Congratulations on successfull proTailwind workshop 🎉
and best wishes for the new journey ahead 🤘
This guy is just awesome....
Very Practical thank you. I would me a video with bullet points of workflow for this kind of projects
love your videos but I rather have vanilla css mixed, like a nontailwind css especially for links if they going to be all the same. I like tailwind but feel it is more work at some point. you have to set it up on all the time. I mean I will use it for break points makes that easier most the time lol
this is amazing!!!
Awesome!
Thanks for sharing
"Draw the rest of the owl"
Usually the style guide is never this complete, or existing at all hahah
Add child selector >~ on tailwind please
Vers interesting video thanks
thanks!
hey do you know which theme and font used in this video
@@Ikram-Hussain theme: nightowl
font: Dank Mono
@@andygr1n1 thanks man
@@Ikram-Hussain bro just recomend you do not install italic font for Dank Mono, it bugs on some letters! Install just regular version and enjoy the style.
Can you share that figma design? I would show our graphic designer how it should look. I am always getting shit from him.
its will be great if you leave as the code for this
thank you are a great help
I love the right........... *Now* 😂 watched it twice
My kids keep asking to watch it again 🤣
I wonder which other css framework gave those 2 dislikes
Steeeeeeevvveeeeeeeee
Hello, thanks for the tutorial, but I have a question:
According to the chart, every h2 in the app will have 'font-black text-purple font-satoshi text-2xl tablet-text-4xl', so why not style every h2 in the app with @apply instead of copy/pasting all the classes in every h2? (Same for other headings/etc).
I was exactly thinking of this!
Ideally you'll create a component (react, vue, etc). Applying styles globally is not a good idea because in a large project you'll encounter conflicting styles sooner or later.
@@isimvol not everyone is using react, vue etc. Creating a component is not an option for all cases. Global styles are very useful and there are no conflicts. then your system has issues