https://github.com/kt474/tailwind-converter
Convert plain HTML/CSS into tailwind
https://github.com/kt474/tailwind-converter
converter css nextjs tailwind tailwindcss
Last synced: about 2 months ago
JSON representation
Convert plain HTML/CSS into tailwind
- Host: GitHub
- URL: https://github.com/kt474/tailwind-converter
- Owner: kt474
- License: mit
- Created: 2022-05-01T04:27:38.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-08T23:05:48.000Z (3 months ago)
- Last Synced: 2025-04-08T23:24:14.850Z (3 months ago)
- Topics: converter, css, nextjs, tailwind, tailwindcss
- Language: TypeScript
- Homepage: https://tailwindconverter.app
- Size: 1.38 MB
- Stars: 60
- Watchers: 4
- Forks: 7
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Support: SupportedClasses.md
Awesome Lists containing this project
README
# Tailwind Converter
The goal of this project is to take plain HTML/CSS and convert it to a
single HTML file with [Tailwind](https://tailwindcss.com/) classes. Tracking supported
Tailwind classes [here](SupportedClasses.md).**Note: This project is a work in progress. There may be bugs or incomplete features.**
Keep in mind that converting an existing project to use Tailwind CSS often involves more than just replacing classes. It may be best to restructure your HTML and/or adjust your design to match the available utility classes. Manual conversion would provide more control over the process and likely ensure a better end result.
## Run Locally
Clone the repo, install the dependencies and run in a local environment:
```bash
git clone https://github.com/kt474/tailwind-converter.git
cd tailwind-converter
npm install
npm run dev
```## TODO
- [ ] Refactor conversion code and go over all tailwind classes again. Support as many as possible
- [ ] Support Tailwind V4
- [ ] Use Vitest to add testing module
- [ ] Add option to use exact dimensions
- [ ] Show user which css properties were not converted
- [ ] Support active states, css nesting, and media queries