In this year's blog planning, one item is to change the way blog styles are written. For me, Sass (Scss) is somewhat redundant now, as CSS itself is powerful enough, and mainstream browsers already support nested styles.
Do I want to write styles using pure CSS? No, I don't. I want to try another way of writing styles—using classes. By using the pre-defined styles of TailwindCSS in the class attribute of HTML tags, I can achieve the functionality I need, which is quite suitable for my personal blog.
I don't want to maintain large style files; having just the template files (layouts/*) is enough. Therefore, I chose TailwindCSS. There are two reasons for this choice:
- I have previously contributed code to yihong's running_page using TailwindCSS, so I am familiar with its usage.
- Hugo has started experimental support for the new version of TailwindCSS (v4, currently in the alpha stage) and provides a test repository.
The process of modifying styles was quite drastic: I first deleted all the original styles and then gradually converted them into classes with the help of ChatGPT. The process was complex and completed in several stages.
Of course, there are bound to be some omissions during this migration. Some styles may look different or quite simple compared to before, and some may even look worse.
Therefore, I would like to ask for everyone's help: if you are reading this article, please take a moment to report any style bugs. You can provide feedback here.