Day 5 Tailwind CSS

Ok, this part is interesting for me as I want to include icons, in Tailwind CSS case, SVG icons. This is because I used icons from Bootstrap and I am curious on how to do this in Tailwind CSS.

👉 BTW There’s a good screencast on how to here: Working with SVG Icons - Tailwind CSS

👉 You can check out Tailwind’s resources page for images and illustrations: Resources & Assets - Tailwind CSS

Tips:

1. A bunch of SVG icons ready to inject into your site via Resources & Assets - Tailwind CSS
2. Clean up SVG, head over to SVGOMG - SVGO’s Missing GUI
   • Copy the script in your SVG file
   • Paste it in SVGOMG, you would get a new version of the SVG and it’s smaller in size.
   • Copy from SVGOMG (there’s a copy button)
   • Paste it into your SVG file replacing the old script
3. You can paste that new script into your template/html file.
   • Delete the width and height from SVG script, and add class=“” and start adding your tailwind attributes like h-4 w-4

4. What about other things you can do?

   • Colour: Look for the fill=“...” property in your SVG script. Delete it. Then in your class, use Tailwind’s CSS utility: fill-current - this will match the current text colour. Then you can use Tailwind’s text color utility, e.g. text-red-500.

   Example:-
   

   class=“h-24 w-24 fill-current text-red-500
   

💡Pro-tip: If you are working with custom SVG icons, make sure they are exported as squares. It just makes it easier when resizing the icon in Tailwind CSS.

The rest of the webcast is rendering multiple icons in a row, in that example is star ratings - 5 stars in a row. I’m not interested using that at the moment for what I’m doing. But you can use v-for, :key & flex utility to show multiple star icons on a row and not stacked on top of one another. Then it’s just using Tailwind utilities to make it nicely aligned. So check out the webcast if you are interested in this part.