Installation
Install IntentCSS globally and start generating Tailwind CSS or CSS directly from natural language prompts.
Requirements
Before installing IntentCSS, ensure you have:
- Node.js 18 or newer
- npm 9 or newer
Verify your versions:
BASH
node --version
npm --version
node --version
npm --version
Global Installation
Install IntentCSS globally:
BASH
npm install -g intentcss
npm install -g intentcss
Verify the installation:
BASH
intentcss --help
intentcss --help
Expected output:
TEXT
Usage: intentcss [options] [command]
Describe the UI. Get the CSS.
Commands:
generate
explain
help
Usage: intentcss [options] [command]
Describe the UI. Get the CSS.
Commands:
generate
explain
help
Using Without Installation
You can run IntentCSS directly using npx:
BASH
npx intentcss generate --prompt "blue button"
npx intentcss generate --prompt "blue button"
Example output:
TEXT
rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700
rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700
Local Development Installation
Clone the repository:
BASH
git clone https://github.com/Cortlet-Org/intentcss.git
git clone https://github.com/Cortlet-Org/intentcss.git
Enter the project:
BASH
cd intentcss
cd intentcss
Install dependencies:
BASH
npm install
npm install
Build the project:
BASH
npm run build
npm run build
Run the CLI:
BASH
npm run dev -- generate --prompt "red button"
npm run dev -- generate --prompt "red button"
Global Development Linking
To test a local version globally:
BASH
npm link
npm link
You can then use:
BASH
intentcss generate --prompt "glass login form"
intentcss generate --prompt "glass login form"
from any terminal.
To remove the link:
BASH
npm unlink -g intentcss
npm unlink -g intentcss
Verify Everything Works
Generate a button:
BASH
intentcss generate --prompt "large red button"
intentcss generate --prompt "large red button"
Expected output:
TEXT
rounded-lg bg-red-600 px-6 py-3 text-lg text-white hover:bg-red-700
rounded-lg bg-red-600 px-6 py-3 text-lg text-white hover:bg-red-700
Generate a form:
BASH
intentcss generate --prompt "glass login form"
intentcss generate --prompt "glass login form"
Expected output:
TEXT
flex flex-col gap-4 backdrop-blur-md bg-white/30 border border-white/20 rounded-xl shadow-md p-6 space-y-2
flex flex-col gap-4 backdrop-blur-md bg-white/30 border border-white/20 rounded-xl shadow-md p-6 space-y-2
Updating IntentCSS
Update to the latest version:
BASH
npm update -g intentcss
npm update -g intentcss
Or reinstall:
BASH
npm install -g intentcss@latest
npm install -g intentcss@latest
Uninstalling
Remove IntentCSS:
BASH
npm uninstall -g intentcss
npm uninstall -g intentcss
Troubleshooting
Command Not Found
If you receive:
TEXT
intentcss: command not found
intentcss: command not found
or
TEXT
'intentcss' is not recognized as an internal or external command
'intentcss' is not recognized as an internal or external command
verify:
BASH
npm link
npm link
or reinstall globally:
BASH
npm install -g intentcss
npm install -g intentcss
Check Installation Location
View the global npm installation directory:
BASH
npm root -g
npm root -g
Verify Installed Version
BASH
intentcss --version
intentcss --version
Next Steps
- Intent Engine
- Supported Intents
- Modifiers
- CLI Reference
- Generate Command