DEV Community

Cover image for TW Elements - TailwindCSS IntelliSense. Free UI/UX design course
Keep Coding
Keep Coding

Posted on

TW Elements - TailwindCSS IntelliSense. Free UI/UX design course

Tailwind CSS IntelliSense

Before we move on to other topics related to Tailwind, I would like us to take a look at one extremely useful tool.

I mean Tailwind CSS IntelliSense, which is an extension to the Visual Studio Code editor.

To be honest, it's hard for me to imagine working with Tailwind without this plugin now, and that's why I want you to install it too and learn how to use it.

Note: To use this extension, of course, you need the Visual Studio Code editor itself.

It's free and you can download it here.

What exactly is Tailwind CSS IntelliSense?

"Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting."

Installation
Installation is very simple. Go to the Tailwind CSS IntelliSense page.

Then click the green "Install" button.

Image description

The browser should ask you for permission to run Visual Studio Code. After agreeing, the installation should start automatically in the editor.

After the installation is complete, you can restart VSCode to make sure the extension will work properly.

Autocomplete

As you start typing the class name, a list of hints will appear.

Look at the gif below - when you start typing the bg-blue class, a list of available colors appears. What's more, we even have these colors represented in these little squares in the list.

Isn't that super useful? 🤩

Image description

Hover Preview

Not sure what exactly a Tailwind class does? Nothing easier - just hover over it and the IntelliSense plugin will display the exact CSS code that this class uses.

Image description

Linting

The IntelliSense plugin will also show you code errors.

Look at the gif below - when I added the .bg-red-200 class next to the .bg-blue-500 class, both classes were underlined to alert us that something was wrong.

When hovering over them, we see that IntelliSense warns us about a conflict - both classes modify the same CSS property: background-color. So only one of them will work, so it's obviously a mistake.

Image description

Alright, armed with this new tool, we are ready for the next challenges ⚔

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

Top comments (0)

The AI Copilot for All of Your Apps

Pieces.app image

The Pieces Copilot shadows your workflow, leveraging deep context from your entire toolchain for powerful coding conversations and real-time AI assistance right inside your IDE, browser and desktop app.

Try the secure, on-device productivity tool for free today.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay