Easy Tailwindcss
easy-tailwindcss for VSCode
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
Enterto save it.
Using a Command:
- Press
Ctrl+Shift+P(orCmd+Shift+Pon Mac) to open the Command Palette. - Type
Easy TailwindCss: Add your API keyand select the command. - Select an AI provider (Gemini or Groq).
- Enter your API key in the input field and press
Enterto save it.
- Press
- 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
classorclassNameand 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(orCmd+Shift+Pon Mac) to open the Command Palette. - Type
Easy TailwindCss: Help me with TailwindCssand 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.
- Press
β¨ 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. |
Contributing
Something missing? Create a pull request
Found a bug? Create an issue
π License
This project is licensed under the Apache License 2.0. See the LICENSE file for details.
