Product preview card component
This is a solution to the Product preview card component challenge on Frontend Mentor.
The challenge
Users should be able to:
- View the optimal layout depending on their device’s screen size
- See hover and focus states for interactive elements
Built with
- Semantic HTML5 markup
- Mobile-first workflow
- tailwindcss
Process
It’s been a while since I worked with Tailwindcss and I thought to give it again a try.
Previously, even if writing tailwind classes was easy because it looks so similar to native CSS language, the development experience in general, wasn’t so enjoyable.
My .html file was covered with classes and it was difficult not only to read the file but also to find any class when I wanted to change something.
This time I was more prepared.
First of all, following the instructions from the tailiwnd’s documentation, I installed, as a Devdepedency tailwindcss, its prettier-plugin and I created all the necessary config files.
Then I used a couple of vscode extensions which simplified working with tailwindcss.
- Tailwind Css IntelliSense, which provides advanced features such as autocomplete, syntax highlighting, and linting.
- Inline fold, which folds automatically all the classes in the .html file and you can expand the folds just by clicking on them.
With these tools, my developing experience was actually nice. Surprisingly I enjoyed working with tailwindcss and I am planning of making another tailwind-project, bigger next time.
Useful resources
- tailwindcss - Tailwindcss documentation.
- Tailwind CSS for Beginners - Learn Tailwind CSS in this tutorial series. Dev environment set up and useful VS Code extensions.
- Coolors - Color palette generator