Translating a Custom Design System to Tailwind CSS
Vložit
- čas přidán 11. 11. 2021
- In this video, we'll take a website design and corresponding style guide given to us by a designer, and translate it into a custom Tailwind CSS configuration to create our own utility framework tuned specifically for the project.
Tailwind CSS: tailwindcss.com
Configuration documentation: tailwindcss.com/docs/configur... - Věda a technologie
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
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!
Amazing video as always! I love the time and care put into each video!
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 ❤
I love the fact that you use accessibility and semantic markup when implementing design! 🔥
This workflow seems VERY professional. Thanks for sharing that.
I loved it.
Great work as usual.
As a beginner I learn a lot from your channel. Hopefully more into designs tutors from Figma to Tailwind CSS. Many thanks.
fun to watch and educational as always!
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
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 🙏
Liked and shared before start watching. Keep up the great work, full respect 🙏
🔥🔥🔥🔥🔥 as always, huge thanks for awesome 😎 videos
Great video - and you sound great with that ICON Pro too!
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 👍
Awesome Simon!!!, Your videos are best I've seen on youtube, I loved the sound of super mario 🍄.
Great content. Thank you very much!
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.
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
As always top notch
That intro though.. 🔥
super cool sir, this is make development easier
This was very helpful 👍👍
That is what I was looking for.
It would be really cool if you could share the style guide document so we can use it as a template in the future
Love your microphone!
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
Amazing❤️
Make the header section please, i'm really curious how you make the gradient background
If only I could like twice, I love tailwind css.
handy video thanks!
I love this guy ❤️🌚
this is amazing!!!
Do you have the style guide somewhere where we can view it? It seems like a great starter point for designers. Thanks!
Great Components
This guy is just awesome....
Excelente Video gracias infinitas
Awesome!
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.
Thanks for sharing
Very Practical thank you. I would me a video with bullet points of workflow for this kind of projects
I want to design only for Desktop version how can I disable the responsive when resize screen?
Im still seeing that NOW! Power punch 🤜
Good, subscribed!
hey do you know which theme and font used in this video
@@Ikram-Hussain I have no idea
The most important video when you start a tailwind project
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
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 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.
Vers interesting video thanks
Hi! Are you using VSCode? Which plugins are you using? Especially the ones which help with tailwind
can anyone tell me which font and theme were used on this video?
please😍
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)
how did you get that background color/image
can anyone helpme with that
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
Any place I can download free style guide documents just to practice my web design and dev?
Ser please can we get the figma file of this project!!
Congratulations on successfull proTailwind workshop 🎉
and best wishes for the new journey ahead 🤘
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!
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
hi, is it possible I can have the Figma file?
which font you're using for vscode ?
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
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 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
its will be great if you leave as the code for this
thank you are a great help
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!
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.
Add child selector >~ on tailwind please
Usually the style guide is never this complete, or existing at all hahah
I love the right........... *Now* 😂 watched it twice
My kids keep asking to watch it again 🤣
"Draw the rest of the owl"
Can you share that figma design? I would show our graphic designer how it should look. I am always getting shit from him.
Steeeeeeevvveeeeeeeee
I wonder which other css framework gave those 2 dislikes