{"id":15683549,"url":"https://github.com/rajasegar/ember-tailwind-codemod","last_synced_at":"2025-05-07T13:06:33.692Z","repository":{"id":57224400,"uuid":"369178260","full_name":"rajasegar/ember-tailwind-codemod","owner":"rajasegar","description":"Codemod for migrating to Tailwind utilities in Ember components ","archived":false,"fork":false,"pushed_at":"2021-06-08T05:12:28.000Z","size":650,"stargazers_count":10,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-24T12:43:18.617Z","etag":null,"topics":["codemod","codemods","ember","emberjs","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rajasegar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE-OF-CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-20T11:04:16.000Z","updated_at":"2024-05-30T03:18:49.000Z","dependencies_parsed_at":"2022-09-04T07:01:24.860Z","dependency_job_id":null,"html_url":"https://github.com/rajasegar/ember-tailwind-codemod","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-tailwind-codemod","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-tailwind-codemod/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-tailwind-codemod/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rajasegar%2Fember-tailwind-codemod/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rajasegar","download_url":"https://codeload.github.com/rajasegar/ember-tailwind-codemod/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252480662,"owners_count":21754814,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codemod","codemods","ember","emberjs","tailwindcss"],"created_at":"2024-10-03T17:06:57.928Z","updated_at":"2025-05-07T13:06:33.672Z","avatar_url":"https://github.com/rajasegar.png","language":"JavaScript","funding_links":[],"categories":["📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# ember-tailwind-codemod\n\n![Build and Deploy](https://github.com/rajasegar/ember-tailwind-codemod/workflows/CI/badge.svg)\n[![npm version](http://img.shields.io/npm/v/ember-tailwind-codemod.svg?style=flat)](https://npmjs.org/package/ember-tailwind-codemod \"View this project on npm\")\n[![Coverage Status](https://coveralls.io/repos/github/rajasegar/ember-tailwind-codemod/badge.svg?branch=main)](https://coveralls.io/github/rajasegar/ember-tailwind-codemod?branch=main)\n\n\nA Codemod to convert plain CSS class definitions into [Tailwind](https://tailwindcss.com) utilities for your Ember Components\n\n### Installation\n\n```\nnpm install --global ember-tailwind-codemod\n```\n\n## Usage\n\nTo run the codemod, you would enter the following command in your terminal:\n\n```\nnpx ember-tailwind-codemod  path/of/files --css=dist/assets\n\n# or\n\nyarn global add ember-tailwind-codemod\nember-tailwind-codemod  path/of/files --css=dist/assets\n```\n\nYou have to pass the CSS build assets dir path to parse the CSS for conversion. **It is mandatory**\n```\nnpx ember-tailwind-codemod app/templates --css=dist/assets/\n```\n\nYou have to setup [Tailwind CSS](https://tailwindcss.com) manually for your Ember project. This codemod will only do the conversion.\n\n## Things to to before running the command\nBefore 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.\n\nSomething like the below command will do:\n```\nember build --environment=production\n```\n\n## Logs\nThere are two log files that will be generated to assist you with Tailwind migration. They are\n- `UNMAPPED_SELECTORS.txt` =\u003e Contains the selectors in your CSS for which there is no conversion.\n- `UNCHANGED_COMPONENTS.txt` =\u003e Contains the list of component names for which the class attributes are not changed.\n\nBy 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.\n\n\n## How it works?\n- First it constructs the Tailwind utilities from your CSS selectors and store it in a map.\n- Second, it will look into each of your hbs files for Components or ElementNodes with class attributes\n- Then, it will try to find the selector mapping from the map from class names.\n- Finally, if it have a mapping it will replace the class attribute values with Tailwind utilities.\n\n\n## Local Usage\n```\nnode ./bin/cli.js path/of/files/ or/some**/*glob.js\n```\n\n## Transforms\n\n\u003c!--TRANSFORMS_START--\u003e\n* [tailwind](transforms/tailwind/README.md)\n\u003c!--TRANSFORMS_END--\u003e\n\n## Contributing\n\n\n### Running tests\n\n* `yarn test`\n\n### Update Documentation\n\n* `yarn update-docs`\n\n## FAQs\n### Will the codemod automatically setup Tailwind for our projects?\n**NO**, the codemod will only do the conversion to Tailwind utilities, you have to manually setup Tailwind for your Ember project. \nYou can take a look at the following resources for the same:\n- https://github.com/embermap/ember-cli-tailwind\n- https://embermap.com/topics/using-functional-css-with-ember/getting-started-with-tailwind-css\n- https://dev.to/jamesbyrne/using-tailwindcss-with-ember-41el\n- https://www.mylittletechlife.com/setting-up-tailwindcss-with-ember-in-2020\n- https://balinterdi.com/blog/ember-tailwind-css-postcss-import/\n\n## Are there any caveats?\nYes, 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 \nnot 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.\n\n## How do I know which things are not converted or omitted?\nYou can inspect the generated log files to check for the same. More info at [logs](#logs)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajasegar%2Fember-tailwind-codemod","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frajasegar%2Fember-tailwind-codemod","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frajasegar%2Fember-tailwind-codemod/lists"}