In this video, I'll show you how to add Tailwind CSS to an existing project without running into naming collisions or specificity issues, and while making sure we don't bloat the CSS by adding a whole new framework into the mix.
This is a good video in that it's realistic about actual scenarios. Need to add !important rules or 1px to media queries to make them work? Do it. Don't fret about perfect when good enough does the job.
Great point. I've done all of these and more and every time you have to pause for a second to decide how guilty you feel. But you shouldn't feel guilty!
Man I didn't think these tailwind videos could get any better! This is a fantastic real use-case that you've made look so simple with a few tailwind config tweaks that almost anyone could do it!
Just Amazing. This tailwind allow us get out of troubles with some responsive design issue an older project that use a GrapeJs builder and bootstrap. The client was amazed by the final result. Big respect to tailwind team 👏
These videos are truly amazing. I started incorporating TW into older Bootstrap 4 projects and I think to myself "Well I've got this figured out" and then Simon drops a new video which I watch for fun but then I realize there is SOO much more that I can do. Brilliant as always, Simon!
Heyy, I really love this videos, it's just awesome to see what you can do with tailwindcss. I'm wondering what Theme and extensions for VS Code you're using, can you put a list of them in the description or maybe make a video about your vs code setup? That would be awesome 🙌
It would be useful to see this methodology used on a large project like a Laravel/Vue project that has a lot of javascript and SCSS to compile. I've been asking about this for quite a while.
Hey Simon, do you think you could include a repo with the tailwind config that you used in this video? Otherwise we have to try to find it in the video.
It's a shame you had to remove Preflight for this and manually implement it to the respective elements. Would it be possible to create a `preflight` class that applies the rules to the children?
2 года назад
Hey Simon, how did you get IntelliSense to work without any node modules installed?
Does tips work in React tho? I have existing projects which I make up with Material UI, but I want to use TWCss alongside with my web app in just some cases.
I have tried your strategy with tailwind 3 and I run into an issue when adding text-color. It creates an output.css color with a variable ($green) which I am assumung is from the core plugins we opted out of. This throws and error because that $green variable is referencing nothing. Have you run into this? If so, is there a fix? Maybe this is an issue with the newest version of tailwind.
Hi, I'm having trouble doing ... for this to work I must do *, :: before, ::after { box-sizing: border-box; /* 1 * / border-width: 0; /* 2 * / border-style: solid; /* 2 * / border-color: currentColor; /* 2 * / } otherwise .. Is there another way?
I loved this minimum config to start working with TailwindCSS for a simple project like this, my question is, base on this simple config, what else do I need to do in order to build the final CSS file for production?
I think he chose 10 so he would have some flexibility in how to divvy up the space to the actual content. In this instance, he had the image span 3 columns and the text was 7 columns. If he chose 2 columns, then by default the columns would be the same width. Again, it was an arbitrary decision. He could have used 12 columns (same as Bootstrap) and used a 4:8 ratio to get a similar result.
@@hfalucas Haha yes, totally arbitrary decision - 1/3 & 2/3 made the image just a bit too wide, so I went with 3/10 & 7/10 without really overthinking it 👍
Then comes the 3. person and introduces the next Best CSS framework, which works really well next to the original, tailwind and and only takes a small footprint, just another 2 commands and 0.5kb extra CSS. Then comes the 4. person... True story.
