DEV Community

loading...
Cover image for Discovering Tailwind CSS

Discovering Tailwind CSS

ChiaraLyn
Frontend Developer - UX/UI Designer
・2 min read

After work there is always something to study and deepen, and if it happens that your work is also your passion, studying is really the best thing!

Today I am about to finish the first "dusting" on Tailwind (tailwindcss.com), to then move on to some practical exercises on components.

Tailwind represents my short break from the JavaScript in-depth course that I hope to finish soon. Studying a new CSS Framework makes me feel almost guilty because I was "born" with Bootstrap and now I feel "at home" when I use it, but Tailwind is a low-level framework and allows you to build responsive components and configure the project at the start, creating customized layouts and with a lot of margin of choice on the color palette and typography.

The only thing to keep in mind when using Tailwind, born to write semantic CSS, is that the markup will get very polluted, and I must to evaluate the maintainability of code written with this type of approach.

With the @apply directive you can create custom classes to which the Tailwind classes "attach", in order to have a custom nomenclature.

In general, I like the idea of keeping markup separate from style, but so it is! Obviously having HTML overflowing with classes it doesn't really matter to some.

Tailwind also, in production, removes the unused CSS, so that we can lighten and optimize the project!

Visual Studio Code has the integration of the Tailwind Intellisense extention, that allows you to view the list of classes while you are writing, a very valuable aid to not do the continuous "ping pong" from the documentation.

I still have to "mess around" a bit to get carried away, but Tailwind has given me good vibrations, also for the good documentation that it hangs around with, (the community looks really nice, you can find it on Discord and GitHub) I will probably work on some small components to share on Codepen.

I hope it will make me passionate as did Bootstrap, which I consider "my giant". On the next break from JavaScript, let's see... what could I do? Of course! I'll go dig into Bulma's documentation...!

Discussion (0)

Forem Open with the Forem app