A Codemod to convert plain CSS class definitions into Tailwind utilities for your Ember Components
npm install --global ember-tailwind-codemod
To run the codemod, you would enter the following command in your terminal:
npx ember-tailwind-codemod path/of/files --css=dist/assets # or yarn global add ember-tailwind-codemod ember-tailwind-codemod path/of/files --css=dist/assets
You have to pass the CSS build assets dir path to parse the CSS for conversion. It is mandatory
npx ember-tailwind-codemod app/templates --css=dist/assets/
You have to setup Tailwind CSS manually for your Ember project. This codemod will only do the conversion.
Before running the codemod in your Ember project, please ensure you generate the CSS assets through your build. Since the codemod needs the final CSS to parse your class definitions and generate the Tailwind utilities.
Something like the below command will do:
ember build --environment=production
There are two log files that will be generated to assist you with Tailwind migration. They are
UNMAPPED_SELECTORS.txt=> Contains the selectors in your CSS for which there is no conversion.
UNCHANGED_COMPONENTS.txt=> Contains the list of component names for which the class attributes are not changed.
By looking at the above files, after running the codemods, you can manually complete the migration because the codemod won't be able to do 100% migration of your CSS and some manual intervention is required.
node ./bin/cli.js path/of/files/ or/some**/*glob.js
NO, the codemod will only do the conversion to Tailwind utilities, you have to manually setup Tailwind for your Ember project. You can take a look at the following resources for the same:
Yes, for the first cut, this codemod will only be able to support class selectors, element selectors and combinators, which means, other CSS selectors like pseudo-class selectors, pseudo-elements and attribute selectors, child selector, adjacent sibling and general sibling selectors are not supported yet. But it is definitely possible in the future and I am working on it. And I could really use some help with Pull Requests.
You can inspect the generated log files to check for the same. More info at logs