Make your CSS experience better using these 3 VS Code Extensions

Writing CSS can be a little frustrating at times 😢. But your workflow can certainly be improved using the right tools. Today we’ll talk about three useful Visual Studio Code extensions that will make your CSS development experience slightly more enjoyable.

---

This issue is sponsored by Tailscan

Tailscan is a browser devtool for Tailwind CSS. It helps you build, design, and debug your Tailwind website visually in the browser. Tailscan offers autocompletion, config support, class validation, and visual guidelines. It also allows you to scan other Tailwind websites. With Tailscan, you'll instantly improve your development experience.

---

Colorize 🌈

Have you ever found yourself squinting at color codes in your CSS files, trying to visualize what they actually look like? You don’t have to do that anymore! This handy extension automatically displays the actual color in the background for the color codes whether they are hexadecimal, RGB or HSL.

Check out Colorize

IntelliSense for CSS class names in HTML 🧠

We've all been there: you're adding a class to an HTML element, but you can't quite remember the exact class name from your CSS file. You lose precious seconds or even minutes switching to your CSS and searching for the name there.

With this extension, you'll get autocompletion suggestions for your CSS class names as you type in your HTML files. It pulls the class names from your linked CSS files, making it a breeze to apply the correct styles.

Check out Intellisense for CSS class names

CSS Media Query Snippets 📱

Creating responsive designs can sometimes feel like a chore - especially when you cannot remember the syntax - “@media min? max? whaaat?“. But with CSS Media Query Snippets extension, adding media query breakpoints for various screen sizes is just about typing it in plain english!

For example: Start typing “small-devices-…” and you’ll see auto-completions like “small devices and up media queries“ and the extension will replace the snippet with media queries accordingly:

Check out CSS Media Query Snippets

Hope this simplifies CSS a little more for you :) Let me know in the replies if you’ve tried any of these extensions and how you like them.

See you next week 👋

---

📘 I’m writing a new book!

If you loved this write-up and how it was explained, you’ll absolutely love my next eBook Level up with Tailwind CSS. Opened pre-orders in February and more than 150 people have grabbed it already 🤯 Check it out!

📨 Newsletter suggestion

I love Tailwind CSS. If you love it too, I highly recommend subscribing to this one 👇

Tailwind Weekly: Weekly newsletter about all things Tailwind CSS. New issue every Saturday.