Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>tailwind-color-suggesterNew to Visual Studio Code? Get it now.
tailwind-color-suggester

tailwind-color-suggester

Himanshu.dev

|
242 installs
| (0) | Free
Suggests Tailwind CSS colors based on hex codes.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Tailwind Color Suggester

Tailwind Color Suggester is a VS Code extension designed to enhance your development workflow with Tailwind CSS. It helps you quickly find and use Tailwind CSS color names based on hex codes directly within your code editor.

Features

  • Color Suggestions: Suggests Tailwind CSS color names when you start typing a hex color code.
  • Hover Preview: Shows Tailwind color names when you hover over a hex color code.
  • Automatic Updates: Reflects changes in your tailwind.config.js file in real-time.

Installation

  1. Open VS Code.
  2. Go to Extensions (Ctrl+Shift+X or Cmd+Shift+X on Mac).
  3. Search for "Tailwind Color Suggester".
  4. Click Install.

Usage

Color Suggestions

When you type a hex color code (e.g., #ff5733), the extension will suggest Tailwind color names that match the code.

Hover Preview

Hover over any hex color code in your code to see the corresponding Tailwind color name.

Development

Prerequisites

  • Node.js (>= 14.x)
  • Visual Studio Code
  • VS Code Extension Development Dependencies

Setup

  1. Clone the Repository:

    git clone https://github.com/HimanshuJain04/Tailwind-Color-Suggester
    cd tailwind-color-suggester
    
    
  2. Install Dependencies:: npm install

  3. Build the Extension:: npm run build

  4. Run the Extension:: Press F5 to open a new VS Code window with the extension loaded.

Contact

For any questions or feedback, please contact:

Author: Himanshudev
Email: himanshu09.dev@gmail.com
GitHub: HimanshuJain04

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft