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
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.
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 ❤
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
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
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.
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
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 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.
Ser please can we get the figma file of this project!! Congratulations on successfull proTailwind workshop 🎉 and best wishes for the new journey ahead 🤘
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.
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
Give the UI designer a raise for providing all the typography and colors etc.
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
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
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!
I love the fact that you use accessibility and semantic markup when implementing design! 🔥
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 🙏
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 ❤
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 👍
Make the header section please, i'm really curious how you make the gradient background
As a beginner I learn a lot from your channel. Hopefully more into designs tutors from Figma to Tailwind CSS. Many thanks.
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
It would be really cool if you could share the style guide document so we can use it as a template in the future
Do you have the style guide somewhere where we can view it? It seems like a great starter point for designers. Thanks!
This workflow seems VERY professional. Thanks for sharing that.
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)
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.
I loved it.
Great work as usual.
can you place the colors like you did and also create variable color system attaching "primary-button (color)" etc?
That intro though.. 🔥
fun to watch and educational as always!
I really liked the intro music !
Great video - and you sound great with that ICON Pro too!
super cool sir, this is make development easier
🔥🔥🔥🔥🔥 as always, huge thanks for awesome 😎 videos
The most important video when you start a tailwind project
Any place I can download free style guide documents just to practice my web design and dev?
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.
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!
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.
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!
which font you're using for vscode ?
Awesome Simon!!!, Your videos are best I've seen on youtube, I loved the sound of super mario 🍄.
Liked and shared before start watching. Keep up the great work, full respect 🙏
Hi! Are you using VSCode? Which plugins are you using? Especially the ones which help with tailwind
I want to design only for Desktop version how can I disable the responsive when resize screen?
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
how did you get that background color/image
can anyone helpme with that
If only I could like twice, I love tailwind css.
can anyone tell me which font and theme were used on this video?
please😍
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
I love this guy ❤️🌚
Great content. Thank you very much!
Love your microphone!
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
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.
Good, subscribed!
hey do you know which theme and font used in this video
@@Ikram-Hussain I have no idea
This was very helpful 👍👍
Excelente Video gracias infinitas
As always top notch
That is what I was looking for.
Great Components
handy video thanks!
hi, is it possible I can have the Figma file?
Im still seeing that NOW! Power punch 🤜
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....
Amazing❤️
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.
this is amazing!!!
Very Practical thank you. I would me a video with bullet points of workflow for this kind of projects
Thanks for sharing
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
Awesome!
Vers interesting video thanks
Usually the style guide is never this complete, or existing at all hahah
Add child selector >~ on tailwind please
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.
I love the right........... *Now* 😂 watched it twice
My kids keep asking to watch it again 🤣
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
"Draw the rest of the owl"
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