Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/einenlum/tailwind-alchemist
A CLI tool to find and replace Tailwind CSS colors 🪄
https://github.com/einenlum/tailwind-alchemist
colors css tailwind tailwindcss
Last synced: about 18 hours ago
JSON representation
A CLI tool to find and replace Tailwind CSS colors 🪄
- Host: GitHub
- URL: https://github.com/einenlum/tailwind-alchemist
- Owner: Einenlum
- License: mit
- Created: 2025-01-29T13:18:35.000Z (13 days ago)
- Default Branch: main
- Last Pushed: 2025-01-30T13:25:05.000Z (12 days ago)
- Last Synced: 2025-02-06T11:49:39.768Z (5 days ago)
- Topics: colors, css, tailwind, tailwindcss
- Language: TypeScript
- Homepage:
- Size: 1.3 MB
- Stars: 12
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Tailwind Alchemist 🪄
A CLI tool to manage and replace Tailwind CSS colors in your project.
Built for developers who want to keep their Tailwind color usage clean and consistent.
**A common use case:**
- You find a great starter kit for your project, but then you realize that **all the Tailwind colors are hardcoded** into the templates.
- You want to **extract them into a custom CSS file** so you can easily change them in the future and maintain consistency. However, doing so can be time-consuming.
**Tailwind Alchemist** has you covered! ✨
---
## Installation
No need to install it, you can run it with `npx`.
## Usage
All commands require at least one option `-p` or `--pattern` to know where to look for.
- Example with one pattern: `-p 'resources/views/**'`
- Example with multiple patterns: `-p 'resources/views/**' -p 'my/other/folder/**'`
### Scan for Tailwind Default Colors
To scan your project for Tailwind default colors:
```bash
npx tw-alchemist scan -p 'resources/views/**' -p 'some/other/folder/**'
```
Options:
- `-v`: Display the files where the colors are found.
```bash
npx tw-alchemist scan -p 'resources/views/**' -v
```
- `-vv`: Display the files and matches where the colors are found.
```bash
npx tw-alchemist scan -p 'resources/views/**' -vv
```
### Scan for a specific color (even a custom one)
```bash
npx tw-alchemist scan indigo-800 -p 'resources/views/**' -vv
```
### Replace Colors
To replace an existing color with another one:
```bash
npx tw-alchemist replace oldColor newColor -p 'resources/views/**'
```
To check what would be done without touching files, use `--dry-run`:
```bash
npx tw-alchemist replace oldColor newColor -p 'resources/views/**' --dry-run
```
Notes:
- If `newColor` doesn’t exist in your Tailwind config, the tool will print the necessary CSS for you to add.
- If `oldColor` is one of Tailwind’s default colors, the tool will use its **OKLCH value** for accurate replacement.
## Compatibility
Only compatible with TailwindCSS 4.x.
Should work more or less on TailwindCSS 3.x.
Tested with Node 18.x, 20.x, and 22.x.
## Disclaimer
This tool is **not** affiliated with Tailwind CSS or its creators. It’s a personal project built to help developers manage their Tailwind CSS colors.
## Contributing
Contributions are welcome! Feel free to open an issue or submit a pull request.
## Tests
After installing the project locally (`npm install`), you can run the tests with:
```bash
npm run test
```
## Author
Yann Rabiller ([@einenlum](https://github.com/Einenlum/)). You can check my [blog](https://www.einenlum.com) and my [book](https://fromphptopython.com) _From PHP to Python_.
## License
This project is licensed under the **MIT License**. See the [LICENSE](/license) file for details.