Welcome to a new journey in the CSS world.

While reading the article I recommend playing this song.

Why 30 days and why TailwindCSS and NextJS?

The X days challenge go back a long way, in 2018, when I started doing the 100 days of code challenge for the first time (not only that I finished it, but I also finished two of them - enough with bragging about me).

After writing React apps with Express backends for a while now, I thought that would be a nice moment to learn something new. Having that in mind, I started searching the web for new technologies, or even old ones that I have never touched, and discovered TailwindCSS. Considering the fact that I was never good at designing things, CSS, or even drawing, I said that it will not work out for me, so I stayed away from it... Until now, when I discovered 30 days of TailwindCSS. So, here we are. For the next 30 days, I will try to get my hands dirty with TailwindCSS, NextJS, and React in such a way that I will feel a little bit more comfortable when creating a new application.

For the first day, I had some fun with the NextJS demo app, setting up Tailwind CSS, and playing around with the dark mode. Nothing too complicated, the focus being on the basics, not on trying to create rocket science.

Accomplishments

• Responsive - Flex? Checked. Works? Checked. Centering a div vertically and horizontally first try without spending 5 hours on it? CHECKED!
• Colors - for a person that has no talent when it comes to design, the color palette of Tailwind CSS is just a life savior.
• Dark theme - never been easier. Just add one class prefix for changes, create a hook and you are good to go.
• Transforms - Want something to scale? Just use scale. Want something to rotate? Just type rotate-{degrees}.
• Transitions - for whoever is still doing transitions in plain CSS, even if you are a CSS god, just give it a shot on the Tailwind transitions... I was amazed.

Result

You can see the application here.