fix: with-tw removed unused styles and added motion saftey #148
Conversation
|
Is this an issue for the other versions of |
Of course!! Always happy to help! Especially with Tailwind stuff :D. The Tailwind Prettier Plugin would have indeed caught these, but I'm not sure it's something I'd recommend adding. There are some known issues with it and PNPM that require some retooling by the user. Although I think class organization is important, and the format used follows MDN standards for css organizing, forcing that standard sounds like a high-level decision. Personally, I use Headwind to handle all of this. |
Hey Julius!! Yup! Looks to be the case. Happy to edit those this weekend if someone doesn't get to them first :D. Separately, I found some fixes for the Yarn 3 on M1 macs that was erroring the CLI. Not sure who the best person is to review that stuff, but happy to link what worked. It's super out of my scope, so I have no idea how it would impact other aspects of the repo- just that it worked for me on my M1. |
Great! Should I merge this and let you open a new one for the others or just leave it open until you get to them? No rush really.
I guess maybe leave a comment on that issue and linking it in the Discord, seems to be a few people subscribing to that with some knowledge about that. |
Merge sounds good to me! Especially at the rate people are starting and using create-t3-app, the more people using the correct standards for CSS the better :D.
Oh awesome!! I'll check the Discord and share there. Thanks!! |
Optimized tailwind styling for with-tw
The with-tw example, and perhaps other tw examples, contain multiple unused/unneeded styles and were not optimized for users who prefer reduced or no motion. Classes were also rearranged to maintain consistency across each div.
An examples of both unused/unneeded styling and class order:
grid grid-cols-1 grid-rows-3 lg:grid-rows-1 md:grid-rows-1 lg:grid-cols-3 md:grid-cols-3 gap-3 mt-3 pt-3 w-full lg:w-2/3 md:w-fullis now
grid gap-3 pt-3 mt-3 text-center md:grid-cols-3 lg:w-2/3When we look at
lg:grid-cols-3 md:grid-cols-3we're saying that if@media (min-width: 1024px)or greater, we should have at least 3 columns in our grid. The addedlg:grid-cols-3is redundant. The original also has this class flow from lg, md, lg, md. For clarity and readability, those specific classes should begin with the smallest applicable screen and scale to largest since we're adding constraints as the screen scales.Some minor css tweaks can be found with the removal of
text-centerandcursor-pointeracross multiple components. Since all of our text is centered, this was applied to the common div. As the div's wrapping the grid blocks already have a pointer on hover, the additional pointer over the a tags isn't functional. Grid elements have also dropped the w-full and h-full classes, as the they naturally fill their container.Screenshots
[Screenshots]
💯