Easy TailwindCss is designed to assist developers who are learning and using TailwindCSS.
It provides a convenient way to find and apply TailwindCSS utility classes directly from within Visual Studio Code.
[!NOTE]
This extension is not an official TailwindCSS product. It is a third-party tool designed to enhance your development experience with TailwindCSS.
🚀 Usage
Follow these steps to use the Easy TailwindCss Extension:
Installation
Go to the Visual Studio Code Marketplace and search for "Easy TailwindCss".
Click "Install" to add the extension to your Visual Studio Code.
API Key Setup
There are 2 ways to API key setup:
Using the Sidebar Panel
Open the "Connection" panel from the sidebar.
Click the "Add your API key" button.
Select an AI provider (Gemini or Groq).
Enter your API key in the input field and press Enter to save it.
Using a Command:
Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) to open the Command Palette.
Type Easy TailwindCss: Add your API key and select the command.
Select an AI provider (Gemini or Groq).
Enter your API key in the input field and press Enter to save it.
Get TailwindCSS utility class
There are 3 ways to obtain the TailwindCSS utility class:
Inline Tailwind Utility Generation
Open a file and type a descriptive message directly within class or className and between | characters..
for example
className="|fixed background|"
Using the Sidebar Panel
Open the "TailwindCSS Helper" panel from the sidebar.
In the input field, describe the utility class you need, for example, "fixed background".
Click the "Get Utility Class" button.
The extension will insert the correct TailwindCSS class at your cursor position.
Using a Command:
This method avoids keeping the sidebar open and can be more convenient if you are not constantly using the sidebar with the extension open.
Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) to open the Command Palette.
Type Easy TailwindCss: Help me with TailwindCss and select the command.
In the input field, describe the utility class you need and press Enter.
The extension will insert the correct TailwindCSS class at your cursor position.
✨ Features
🌍 Natural Language to Tailwind.
Describe styles in English, Spanish or Japanese (e.g., "navbar with dark background and hover effects" or "texto centrado y de color negro" or "かわいいテキスト"), and get precise Tailwind classes.
🤖 Multi-AI Support.
Gemini, Groq.
⚡Inline Tailwind Utility classes Generation.
Write className="|your descriptive message|" → Automatically replaced with AI-generated classes.
⚙️ Settings
Easy TailwindCss extension settings start with easy-tailwindcss.
Setting
Default
Description
showConnectionView
true
Show or hide the Connection view.
showTailwindCSSHelperView
true
Show or hide the TailwindCSS Helper view.
showHelpAndFeedbackView
true
Show or hide the Help And Feedback view.
Commands
Command id
Title
Description
easy-tailwindcss.askAPIkey
Add your API key
Enter your API key to enable communication with the AI service.
easy-tailwindcss.removeAPIkey
Remove your API key
Removes the stored API key from the extension.
easy-tailwindcss.helpMeWithTailwindCss
Help me with TailwindCss
Generate Tailwind CSS utility classes.
easy-tailwindcss.helpMeWithCssAndInfo
Help me with Css and Information
(Internal use) Generates Tailwind CSS utility classes via sidebar input.
