Easy TailwindCss Extension for Visual Studio Code.
APACHE-2.0 License
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.
Enter
to save it.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
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.
Ctrl+Shift+P
(or Cmd+Shift+P
on Mac) to open the Command Palette.Help me with TailwindCss
and select the command.Connection Panel:
TailwindCSS Helper Panel:
Help and Feedback Panel:
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. |
Command id | Title | Description |
---|---|---|
easy-tailwindcss.askAPIkey | Add your API key | Enter your Gemini 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 | Allows to request a TailwindCSS utility class based on a description. |
Something missing? Create a pull request
Found a bug? Create an issue
This extension is not an official TailwindCSS product. It is a third-party tool designed to enhance your development experience with TailwindCSS.
This project is licensed under the Apache License 2.0. See the LICENSE file for details.