Are you on iOS? If no, skip on down. If yes, a quick question!
I've had some people telling me they were having layout issues on iOS, with no padding on the left and right sides (text touching the edge of the screen). I've tried fixing it a few times now, and my tests seemed fine, but then more people mentioned it... so, if you are using iOS, does this email look good for you?
|
Hello Reader,
I get asked for Tailwind content quite often.
My usual reply is “I get why people like it, but it’s not for me.”
Of course, that probably leads to people wondering why I feel like it’s not for me!
And, yeah, that’s a good question 😅.
We’ll get to why it's not for me in a second, but one of the reasons I’m bringing this up now is a couple of weeks ago, a couple of posts came out that put a spotlight on Tailwind, and that’s also led to some pushback, as you might expect.
I’m going to include those articles in the Other awesome stuff from around the web section below, and whether you love, hate, or are indeifferent about Tailwind I’d suggest giving them a read.
But first, I know a lot of people are very big fans of Tailwind.
I get why people like it!
And this might seem silly to a lot of people, but if you disagree with what these are saying, please don’t take it personally.
For reasons, people seem to take the defence of Tailwind a lot more personally than any other CSS-related thing I’ve ever seen.
This is normal.
When we’re big fans of things, it, in a way, becomes a thing that we identify with as well.
We see this with from politics, to fandom in movies, to sports, and tons of other things as well.
But I never have seen it in the world of CSS until Tailwind took off.
Like, there has been a lot of pushback against naming conventions BEM over the years, and usually proponents of it would shrug and be like “I see what you’re saying, though I still like it…” 😅.
When someone talks negatively of Tailwind, even when it is well thought out and researched, it can bring out a lot of very aggressive pushback.
Part of it might be that it’s more heavily marketed than other things out there, so it builds a culture of sorts around it.
And of course, that doesn’t mean it’s everyone who’s being agressive about it.
There’ll be a silent majority who doesn’t really care one way or the other, or who are fans of it, but aren’t bothered if someone else doesn’t like it, but the vocal defenders can be very vocal at times 😅.
If you like Tailwind, and plan to keep using it, that’s great!
As with most things in life: You do you!
As for me, I enjoy writing CSS the more old-fashion way.
I get that naming things can be hard (and have a live stream this week on that, see below for more info).
And there are a few other things that come with using it, and in the right situation I think it can be helpful.
But it all comes with tradeoffs too.
I like utility classes.
One of the reasons I moved away from BEM was because I started using more and more utility classes, which sort of goes against the idea of BEM.
I use them in basically every project that I work on, but up to a certain point.
When I have 4 utility classes on something, I start to think “maybe a class would be better here”.
And, I also feel like the “I don’t have to worry about naming things” isn’t as cracked up as it sounds because I still need to name my components (and if you aren’t using some sort of JS framework or templating system that allows you to use components, please don’t use Tailwind).
If I’m creating a .card class, for example?
And for some things, I feel like Tailwind promotes an over-componentization of things as well. You don’t want to repeat yourself, so you end up turning everything into a component.
Going to the other extreme, there are tradeoffs there too! As I said, I used to love BEM, but after awhile found it a bit too much, and annoying where a sprinkling of utility classes would make my life a lot easier.
These days, I find myself somewhere in the middle.
But once again, different systems are going to work better for different projects, and different people are going to have their own preferences, and there’s nothing wrong with that.
🙋♂️ What I’ve been up to this week
A simple mistake that can screw up your light/dark theme
If you use color-scheme: light dark, and also have a toggle for users to be able to change their color scheme preference, you might run into an issue where some things stick with the wrong theme when the user changes it, so in this video I look at the very simple solution.
Can I clone this fun effect from CSS Day’s site?
The speaker lineup section of the CSS Day site has a really interesting hover effect, where hovering on the name will make the image grow, and hovering on the image will highlight the name of the speaker.
With the two things not being next to one another, it might look like something you’d need JS for, but there’s a few ways you can do it with CSS-only.
I did it with a fun use of grid and positioning and using :nth-of-type to select ranges of content.
🗓️ Mark you calendar
New section this week that will pop up now and then, when I have the foresight to plan things out 😅.
Naming things is hard, let’s get better at it!
This Monday at 1pm EST, Adam Argyle is going to join me for a live stream where we will talk about how we’re all terrible at naming things, and how we can get better at it.
We’ll look at some familiar patterns, break down some layouts, and refactor some existing code.
(If you click the link above to get to YouTube, it'll show you the planned start time in your local timezone)
CSS Day & Smashing Conf
In case you missed it, I’ll be speaking at CSS Day on June 6th & 7th in Amsterdam this year, as well as Smashing Conf on October 7th-10th in New York City.
Smashing Conf has several different packages, including students tickets, and an online option, plus extra workshops. If any of them sound intersting, you can use this link to get 15% off your ticket.
They also have a Convince your Boss page to try and help you get your company to pay for it 😊.
🔗 Other awesome stuff around from the web
Tailwind marketing and misinformation engine
Tero Piirainen recently put up this post exploring some of the issues with Tailwind, and it brings up one of the things I don’t particularly like about Tailwind that I mentioned above, which is that it encourages an over-componentization of things.
What is Utility-First CSS?
The day after Tero posted that, Heydon Pickering posted this article exploring the idea of utility-first CSS and, as you might expect from Heydon, he doesn’t hold back on his dislike for it 😅.
Some of the early parts might feel like “well, that’s not really how you’d use it” examples, but he uses those to look at why working with it as a pure replacement for more traditional CSS doesn’t work, and then also raises the issues of using it even when you have more tooling.
Plus, this might be one of the best lines I’ve read in a long time.
It turns out, people in tech are particularly bad at distinguishing between paradigm shifts and paradigm sharts.
Tailwind vs. Semantic CSS
One last thing before I stop piling on, Tero Piirainen had another great post from last year that looked at a few other issues with Tailwind, but the specific thing I want to bring up is how he compared a page written with semantic CSS to the same design written in Tailwind.
Instead of comparing the size of the CSS files, he compared the size of the HTML + CSS files… as you’d guess, the HTML file is going to be quite a bit heavier as there’s a lot more in them.
What you might not guess is that it was 7x heavier.
We often hear one of the advantages of Tailwind is that it ships less CSS… but that doesn’t tell the whole story.
🏁
Of course, these are all presenting one side of the story and have clear opinions and maybe even agendas, and we need to keep that in mind, but I do think they raise some good points.
Anyway, that's it for this one!
Have a great week!
Kevin