Learning Tailwind CSS Part 2: Electric Boogaloo
Last time we left off…
I was talking about the what and why of Tailwind CSS. The “what is it?” and “why would you use it?”. I also touched on a bit of how we would use it. Now see the problem with this is that I ultimately left myself a big hole to fill in for this blog post. Now I’ve done a good amount of my PokeDex, what do I do next?
Do I make another PokeDex?
Make another website?
Stop procrastinating and start doing my taxes?
Well, there’s more that we could do. For one, the current website does not look great at all in the mobile version.
Yeah…the functionality of this website doesn’t really work well when all the cards are smushed in together.
Making G̶o̶o̶d̶ ̶L̶i̶f̶e Responsive Design Choices
Fortunately, unlike regular CSS, Tailwind CSS makes the process for mobile/responsive design a lot easier to handle. This is the code for designating the CSS properties of a certain target.
So this is what the vanilla CSS (CSS3) media query looks like. If you don’t know what a media query is, it’s just a fancy term for changing the CSS depending on what device you’re accessing from. In this case, it would be a phone.
The “max-width” part of this media query is just the maximum width of the device that this CSS change will affect. 600px is basically the maximum width size for a phone, so anything under 600px in width will have a background colour of light blue.
The problem here is that this is a lot to type out. And it’s tedious too, especially since it’s most likely that you’re going to have to do more than one device. So you’ll have to make multiple ones for different properties for different width sizes.
And here’s what TailwindCSS has for their responsive design code.
That’s it. It’s actually pretty impressive. What’s going on here can be broken down into two parts. Number one is the “sm:” and number two is the “bg-blue-300”.
sm: is just the whole “@media max-width: 600px” thing that we had previously but condensed into two letters. It’s really that simple.
Then you have the other breakpoint prefixes for other devices.
md (medium/768px), lg (large/1024px), xl (extra large/1280px), 2xl (extra extra large/1536px), etc.
The colon is just what the properties of the element will have under that specific width. That’s where the “bg-blue-300" comes in. This is just the code to make the background colour (bg) into light blue (blue-300).
Let’s see this in action, yeah?
Fixing The Mobile Version
So, the problem with the cards is that too many of them show up when looking through a mobile phone.
So why don’t we just change the number of columns for the grid so that only 1 shows up?
But when you go back to see what the desktop looks like…
Now there’s a bunch of unused white space on each side of the cards. This is obviously not ideal, so what should we do?
I kinda realized the question is rhetorical at this point, but yeah the solution would be to use media queries to set up the design.
Some of you keen-eyed people might have recognized that the default that I’m going for is 1 column for the grid. This is actually ideal since you’re supposed to create websites to be mobile-first. Then you can see the breakpoint for desktop (2xl) has 6 columns. So, therefore, the website looks like this.
While the mobile version looks like this.
Great! We figured out the responsive design which could arguably be the most important part of your website since according to Statista.com, mobile devices count for more than 50% of your traffic.
So what now?
There are other functionalities with TailwindCSS that you can do with. For example, you could add a dark mode to your website so all those cave-dwelling programmers don’t have to get blinded by your website.
In fact, that’s what I’m gonna add to my website.
So, how do we start? Well, according to the official website’s instruction, you have to manually go into the config file to turn it on.
As you can see, the default is false, presumably to not assume that the developer will have dark mode functionality. However, my frail tender eyes would genuinely prefer if more websites could add dark themes so that the brightness doesn’t burn my eyeballs off.
I’m looking at you Medium.com.
As you may have noticed from the picture, the dark mode functionality has two options other than “false” (yeah I’d hope so too.). These two options are ‘media’ and ‘class’. The media option will check whether or not the device’s operating system has dark mode turned on or off, and adjust the website from there. The class option is the more manual option, not considering the ‘prefers-colour-scheme’ option. This allows websites to have a toggle for their dark mode.
Which is exactly what I was planning on using.
The Dark Mode Rises
So like I said before, the first step into integrating dark mode is to turn it on in the config file.
So there, an unnecessarily large image of me changing one line of code.
The next step would be adding a toggle button to the website. I followed this guide for adding a dark mode toggle for Tailwind onto a React app.
Sometime later…
After fiddling around, I managed to get the dark mode functionality onto my website.
What do you mean you don’t see any difference? The toggle is right there in the corner. That’s a difference, right?
Fine, I’ll click on it and show you the design.
So you may have noticed that the toggle itself has an animation. I followed this guide by Jose Felix, which goes into React Spring. React Spring is just a way to have animations with React apps. But since we’re talking about Tailwind in this blog post, I’ll focus on the CSS. I will recommend reading Jose’s post since it’s insanely informative.
Anyways, similarly to the responsive design part of Tailwind CSS, you will add the changes after the selector.
This is the navigation bar’s CSS changes. You can see that there is a “bg-red-500” and a “dark:bg-gray-900”. The default of the navigation bar is red and when changed to dark mode, it turns into a super dark gray (basically dark navy blue).
For the buttons, there is a hover change for the styling to be different. And it looks like this.
Unlike my body, the hover selector has a functioning colon. How can I have both the hover selector and the dark mode selector? Well, that’s easy.
You just smush them together.
And there you have it, a dark mode functionality for your website.
If you want to see the website in action, click here.
Putting Tailwind’s Money Where Its Mouth Is
On the website for TailwindCSS, in big black bold lettering are the words:
Rapidly building a website is a pretty great idea and something that I’m willing to test out. I’m going to redesign one of my old websites with TailwindCSS and see how fast I can do it.
