Translating a Custom Design System to Tailwind CSS

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...

[@iDarthGigi]

Please make a video where you share your Visual Studio Code settings, themes, plugins, etc. Your setup looks so clean and professional!

[@ray-lee]

+1

[@gochagochitashvili9955]

+1

[@tomislavbalabanov8008]

+1

[@Hurtwolf]

+1

[@cesin68]

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

[@_the_one_1]

I love the fact that you use accessibility and semantic markup when implementing design! 🔥

[@danceban9166]

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 ❤

[@iDarthGigi]

Amazing video as always! I love the time and care put into each video!

[@QueeeeenZ]

Love your intros and outros and the effects that you add. Makes learning that much more fun! Thanks, Simon!

[@simonswiss]

I love making these intros and outros, so this is a win-win!

[@princeparaste5659]

Give the UI designer a raise for providing all the typography and colors etc.

[@johnlin6121]

This workflow seems VERY professional. Thanks for sharing that.

[@josefigueiredo4775]

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

[@aslamshah88]

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.

[@simonswiss]

I'm glad I was able to help 🙏

[@jayhu6075]

As a beginner I learn a lot from your channel. Hopefully more into designs tutors from Figma to Tailwind CSS. Many thanks.

[@babakfp]

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😄.

[@simonswiss]

Ah yeah this is a pretty useful magic trick - love to use it when deadlines are getting too close 👍

[@azam920]

🔥🔥🔥🔥🔥 as always, huge thanks for awesome 😎 videos

[@Earthworksaudio]

Great video - and you sound great with that ICON Pro too!

[@agk2011]

I loved it. Great work as usual.

[@chunli680]

fun to watch and educational as always!

[@suhas5214]

Could we please get the figma file and the completed project files? As a beginner it would really help out trying to build this.

[@heychazza]

+1

[@iDarthGigi]

+1

[@richard_keep]

+1

[@iDarthGigi]

Got anything yet?

[@erzst]

+1

[@edwinramirez]

Awesome Simon!!!, Your videos are best I've seen on youtube, I loved the sound of super mario 🍄.

[@Explores_Montreal]

Liked and shared before start watching. Keep up the great work, full respect 🙏

[@ed1nh0]

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.

[@jullweber508]

Do you have the style guide somewhere where we can view it? It seems like a great starter point for designers. Thanks!

[@lukedharrison326]

That intro though.. 🔥

[@codingwithrendi]

super cool sir, this is make development easier

[@anoorhakim20]

Make the header section please, i'm really curious how you make the gradient background

[@adbirdk]

Great content. Thank you very much!

[@BobbyBundlez]

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

[@breack1652]

It would be really cool if you could share the style guide document so we can use it as a template in the future

[@marcorieser]

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.

[@pranitmane]

This was very helpful 👍👍

[@Pandelache]

Love your microphone!

[@MorganMurungi]

If only I could like twice, I love tailwind css.

[@samisbgh6253]

I love this guy ❤️🌚

[@devsbuddy]

That is what I was looking for.

[@miguelhinojosa6443]

Excelente Video gracias infinitas

[@lukaszpiotrluczak]

Hi! Are you using VSCode? Which plugins are you using? Especially the ones which help with tailwind

[@daoodqurashi4758]

As always top notch

[@zebcode]

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.

[@sudarshanv9797]

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

[@Tchosk]

handy video thanks!

[@daviemola864]

This guy is just awesome....

[@andreaskarz]

The most important video when you start a tailwind project

[@yekrinasoftware]

Great Components

[@osherezra8460]

Very Practical thank you. I would me a video with bullet points of workflow for this kind of projects

[@SushanGhimire55]

Amazing❤️

[@prizigner]

Im still seeing that NOW! Power punch 🤜

[@SunSenAn]

I want to design only for Desktop version how can I disable the responsive when resize screen?

[@youneshenni5417]

this is amazing!!!

[@karianpour]

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.

[@zachphilipp786]

Any place I can download free style guide documents just to practice my web design and dev?

[@easonhuang4031]

Good, subscribed!

[@Ikram-Hussain]

hey do you know which theme and font used in this video

[@easonhuang4031]

@@Ikram-Hussain I have no idea

[@KaranBhansali08]

Thanks for sharing

[@johncarter6206]

Should we be using rem for custom font sizes, even when the designers give us px?

[@macbruker]

Good question! I think converting pixel values to rem is good practice, and I believe it also helps some assistive tools.

[@permanar_]

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)

[@4444altan]

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).

[@darkbluewalther]

I was exactly thinking of this!

[@isimvol]

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.

[@groovebird812]

@@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

[@kevind2154]

Vers interesting video thanks

[@MikeStratton]

Awesome!

[@christogonusobasi7882]

How can I configure editor to bring the suggestions as you have?

[@simonswiss]

Hey! This is the vscode "Tailwind Intellisense" extension - if you're using vscode, installing that extension will work without any setup!

[@eminembts2832]

how did you get that background color/image can anyone helpme with that

[@user-ng3nu5zy5l]

which font you're using for vscode ?

[@yashsolanki069]

Ser please can we get the figma file of this project!! Congratulations on successfull proTailwind workshop 🎉 and best wishes for the new journey ahead 🤘

[@Ikram-Hussain]

can anyone tell me which font and theme were used on this video? please😍

[@AlThePal78]

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

[@HassanHajX]

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]

The secret is simpler than you'd expect - the tag 😄

[@HassanHajX]

@@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

[@jimohtaiwo3703]

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

[@tomcat1112k]

hi, is it possible I can have the Figma file?

[@Zoutzuurtjes]

This is probably asked a lot, but what is your VScode theme name? Really like it! :)

[@Ikram-Hussain]

hey do you know which theme and font used in this video

[@kreten780]

Monokai Pro I believe

[@WarframeCrunch]

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.

[@iDarthGigi]

What's the vsc color extension at 3:26?

[@khaledtribes]

I'd love to know that too!

[@ninecrowns7092]

I think it's Color Highlight by Sergii Naumov

[@simonswiss]

@@ninecrowns7092 Yep, that's it!

[@badreddineb26]

its will be great if you leave as the code for this thank you are a great help

[@andygr1n1]

thanks!

[@Ikram-Hussain]

hey do you know which theme and font used in this video

[@andygr1n1]

@@Ikram-Hussain theme: nightowl font: Dank Mono

[@Ikram-Hussain]

@@andygr1n1 thanks man

[@andygr1n1]

@@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.

[@Devprecious]

I love the right........... *Now* 😂 watched it twice

[@simonswiss]

My kids keep asking to watch it again 🤣

[@thepatternplayback]

"Draw the rest of the owl"

[@altairtodescatto]

Usually the style guide is never this complete, or existing at all hahah

[@kszyh_]

Can you share that figma design? I would show our graphic designer how it should look. I am always getting shit from him.

[@moneyfr]

Add child selector >~ on tailwind please

[@the71agency10]

Steeeeeeevvveeeeeeeee

[@nicholassingh138]

I wonder which other css framework gave those 2 dislikes