{"id":14982770,"url":"https://github.com/josenromero/easy-tailwindcss","last_synced_at":"2025-10-29T16:31:05.463Z","repository":{"id":250499687,"uuid":"834318678","full_name":"JosenRomero/easy-tailwindcss","owner":"JosenRomero","description":"Easy TailwindCss Extension for Visual Studio Code.","archived":false,"fork":false,"pushed_at":"2025-04-21T22:44:22.000Z","size":4560,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-21T23:32:56.091Z","etag":null,"topics":["tailwindcss","visual-studio-code","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=josenromero.easy-tailwindcss","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JosenRomero.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-07-26T23:44:09.000Z","updated_at":"2025-04-21T22:43:51.000Z","dependencies_parsed_at":"2025-04-22T04:51:30.578Z","dependency_job_id":null,"html_url":"https://github.com/JosenRomero/easy-tailwindcss","commit_stats":null,"previous_names":["josenromero/easy-tailwindcss"],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/JosenRomero/easy-tailwindcss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosenRomero%2Feasy-tailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosenRomero%2Feasy-tailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosenRomero%2Feasy-tailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosenRomero%2Feasy-tailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JosenRomero","download_url":"https://codeload.github.com/JosenRomero/easy-tailwindcss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JosenRomero%2Feasy-tailwindcss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281654322,"owners_count":26538641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-29T02:00:06.901Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["tailwindcss","visual-studio-code","vscode","vscode-extension"],"created_at":"2024-09-24T14:05:59.295Z","updated_at":"2025-10-29T16:31:05.457Z","avatar_url":"https://github.com/JosenRomero.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# easy-tailwindcss for VSCode\n\n[![Static Badge](https://img.shields.io/badge/Downloads-VSCode_Marketplace-blue)](https://marketplace.visualstudio.com/items?itemName=josenromero.easy-tailwindcss)\n![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/josenromero.easy-tailwindcss)\n\nEasy TailwindCss is designed to assist developers who are learning and using TailwindCSS. \nIt provides a convenient way to find and apply TailwindCSS utility classes directly from within Visual Studio Code.\n\n\u003e [!NOTE]\n\u003e This extension is not an official TailwindCSS product. It is a third-party tool designed to enhance your development experience with TailwindCSS.\n\n## 🚀 Usage\n\nFollow these steps to use the Easy TailwindCss Extension:\n\n1. **Installation**\n  - Go to the Visual Studio Code Marketplace and search for \"Easy TailwindCss\".\n  - Click \"Install\" to add the extension to your Visual Studio Code.\n\n2. **API Key Setup**\n\n  There are 2 ways to API key setup:\n\n  - **Using the Sidebar Panel**\n\n    - Open the \"Connection\" panel from the sidebar.\n    - Click the \"Add your API key\" button.\n    - Select an AI provider (Gemini or Groq).\n    - Enter your API key in the input field and press `Enter` to save it.\n\n    ![Add api key](https://raw.githubusercontent.com/JosenRomero/easy-tailwindcss/main/images/add_api_key.gif)\n\n  - **Using a Command:**\n\n    - Press `Ctrl+Shift+P` (or `Cmd+Shift+P` on Mac) to open the Command Palette.\n    - Type `Easy TailwindCss: Add your API key` and select the command.\n    - Select an AI provider (Gemini or Groq).\n    - Enter your API key in the input field and press `Enter` to save it.\n  \n3. **Get TailwindCSS utility class**\n\n  There are 3 ways to obtain the TailwindCSS utility class:\n\n  - **Inline Tailwind Utility Generation**\n\n    Open a file and type a descriptive message directly within `class` or `className` and between `|` characters..\n\n    for example \n    ```className=\"|fixed background|\"```\n\n    ![Get tailwindcss utility class 01](https://raw.githubusercontent.com/JosenRomero/easy-tailwindcss/main/images/get_tailwindcss_utility_class_01.gif)\n\n  - **Using the Sidebar Panel**\n\n    - Open the \"TailwindCSS Helper\" panel from the sidebar.\n    - In the input field, describe the utility class you need, for example, \"fixed background\".\n    - Click the \"Get Utility Class\" button.\n    - The extension will insert the correct TailwindCSS class at your cursor position.\n\n    ![Get tailwindcss utility class 02](https://raw.githubusercontent.com/JosenRomero/easy-tailwindcss/main/images/get_tailwindcss_utility_class_02.gif)\n\n  - **Using a Command:**\n\n    This method avoids keeping the sidebar open and can be more convenient if you are not constantly using the sidebar with the extension open.\n\n    - Press `Ctrl+Shift+P` (or `Cmd+Shift+P` on Mac) to open the Command Palette.\n    - Type `Easy TailwindCss: Help me with TailwindCss` and select the command.\n    - In the input field, describe the utility class you need and press `Enter`.\n    - The extension will insert the correct TailwindCSS class at your cursor position.\n\n    ![Get tailwindcss utility class 03](https://raw.githubusercontent.com/JosenRomero/easy-tailwindcss/main/images/get_tailwindcss_utility_class_03.gif)\n\n\n## ✨ Features\n\n- 🌍 Natural Language to Tailwind.\n\n  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.\n\n- 🤖 Multi-AI Support.\n\n  Gemini, Groq.\n\n- ⚡Inline Tailwind Utility classes Generation.\n\n  Write `className=\"|your descriptive message|\"` → **Automatically replaced** with AI-generated classes.\n\n## ⚙️ Settings\n\n\u003e **Easy TailwindCss** extension settings start with `easy-tailwindcss`.\n\n| Setting                   | Default | Description                               |\n|---------------------------|---------|-------------------------------------------|\n| showConnectionView        | true    | Show or hide the Connection view.         |\n| showTailwindCSSHelperView | true    | Show or hide the TailwindCSS Helper view. |\n| showHelpAndFeedbackView   | true    | Show or hide the Help And Feedback view.  |\n\n## Commands\n\n| Command id                             | \tTitle                           | Description                                                              |\n|----------------------------------------|----------------------------------|--------------------------------------------------------------------------|\n| easy-tailwindcss.askAPIkey             | Add your API key                 | Enter your API key to enable communication with the AI service.          |\n| easy-tailwindcss.removeAPIkey          | Remove your API key              | Removes the stored API key from the extension.                           |\n| easy-tailwindcss.helpMeWithTailwindCss | Help me with TailwindCss         |\tGenerate Tailwind CSS utility classes.                                   |\n| easy-tailwindcss.helpMeWithCssAndInfo  | Help me with Css and Information | (Internal use) Generates Tailwind CSS utility classes via sidebar input. |\n\n## Contributing\n\nSomething missing? [Create a pull request](https://github.com/JosenRomero/easy-tailwindcss/pulls)\n\nFound a bug? [Create an issue](https://github.com/JosenRomero/easy-tailwindcss/issues)\n\n## 🔑 License\n\nThis project is licensed under the Apache License 2.0. See the [LICENSE](https://github.com/JosenRomero/easy-tailwindcss/blob/main/LICENSE.txt) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosenromero%2Feasy-tailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjosenromero%2Feasy-tailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosenromero%2Feasy-tailwindcss/lists"}