{"id":19852390,"url":"https://github.com/tzsk/twify","last_synced_at":"2025-05-02T00:31:12.748Z","repository":{"id":37013198,"uuid":"500947457","full_name":"tzsk/twify","owner":"tzsk","description":"A Tool to Setup TailwindCSS With a Single Command","archived":false,"fork":false,"pushed_at":"2024-02-12T23:35:56.000Z","size":3757,"stargazers_count":128,"open_issues_count":7,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-21T09:21:36.669Z","etag":null,"topics":["angular","create-react-app","laravel","nextjs","nuxt3","nuxtjs","sveltekit","tailwind","tailwindcss","vite","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/tzsk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null},"funding":{"github":"tzsk","custom":"https://paypal.me/KMAhmed"}},"created_at":"2022-06-07T17:50:45.000Z","updated_at":"2024-07-17T12:31:44.000Z","dependencies_parsed_at":"2023-11-28T07:48:26.847Z","dependency_job_id":null,"html_url":"https://github.com/tzsk/twify","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzsk%2Ftwify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzsk%2Ftwify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzsk%2Ftwify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tzsk%2Ftwify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tzsk","download_url":"https://codeload.github.com/tzsk/twify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251966431,"owners_count":21672666,"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":["angular","create-react-app","laravel","nextjs","nuxt3","nuxtjs","sveltekit","tailwind","tailwindcss","vite","vue"],"created_at":"2024-11-12T14:01:46.392Z","updated_at":"2025-05-02T00:31:07.739Z","avatar_url":"https://github.com/tzsk.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/13273787/178304155-23c2e2bd-4540-4b0a-bd51-cef236079bc9.jpg\" alt=\"Logo Twify\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/tzsk/twify/actions\"\u003e\u003cimg src=\"https://img.shields.io/github/actions/workflow/status/tzsk/twify/test.yaml?branch=main\u0026logo=github\u0026style=for-the-badge\" alt=\"Build Status\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/twify\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/twify?logo=npm\u0026style=for-the-badge\" alt=\"Total Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/twify\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/twify?logo=npm\u0026style=for-the-badge\" alt=\"Latest Stable Version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/tzsk/twify\"\u003e\u003cimg src=\"https://img.shields.io/github/languages/top/tzsk/twify?logo=typescript\u0026style=for-the-badge\" alt=\"Language\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  A simple tool to setup \u003ca href=\"https://tailwindcss.com/\"\u003eTailwind CSS\u003c/a\u003e in your fresh project with a Single Command.\n\u003c/p\u003e\n\n![Twify](./assets/twify.png)\n\n## :rocket: New Project\n\nScaffold a new project of your choice of framework, with tailwindcss\n\n```sh\nnpx twify@latest create vite \u003cmy-app-directory\u003e\n\n# Or with preferred package Manager\n# Yarn\nnpx twify@latest yarn create vite \u003cmy-app-directory\u003e\n# PNPM\nnpx twify@latest pnpm create vite \u003cmy-app-directory\u003e\n```\n\nAbove the project that is specified is `vite`. You can choose any of the following.\n\n**Project Usage**:\n\nBelow commands will install the `@latest` versions of the respective frameworks.\n\n| **Framework**    | **Command**                                |\n| ---------------- | ------------------------------------------ |\n| Next 13          | `npx twify@latest create next \u003cmy-app\u003e`    |\n| Remix            | `npx twify@latest create remix \u003cmy-app\u003e`   |\n| Nuxt 2           | `npx twify@latest create nuxt \u003cmy-app\u003e`    |\n| Nuxt 3           | `npx twify@latest create nuxt3 \u003cmy-app\u003e`   |\n| Svelte Kit       | `npx twify@latest create svelte \u003cmy-app\u003e`  |\n| Laravel Vite     | `npx twify@latest create laravel \u003cmy-app\u003e` |\n| Vite             | `npx twify@latest create vite \u003cmy-app\u003e`    |\n| Solid Start      | `npx twify@latest create solid \u003cmy-app\u003e`   |\n| Angular          | `npx twify@latest create angular \u003cmy-app\u003e` |\n| Create React App | `npx twify@latest create react \u003cmy-app\u003e`   |\n\nYou can pass all the framework specific flags as well like the following,\n\n```sh\nnpx twify@latest pnpm create vite my-vite-app --template vue-ts\n```\n\nAbove will create a new project with the vite vue typescript project with the `pnpm` package manager and it will be configured with Tailwind CSS.\n\n## :gift: Existing Project\n\nYou can also configure existing project with tailwindcss.\n\n```sh\nnpx twify@latest init\n```\n\n### Command Options\n\nOther than `--help` you can also do more.\n\n#### Keep Existing CSS\n\nBy default, twify will replace your existing CSS and only keep Tailwind. But if you want to keep the existing CSS you can use the `-k, --keep` flag.\n\n```sh\nnpx twify init -k\n# OR\nnpx twify init --keep\n```\n\n#### Force Package Manager for Installation\n\nBy default, twify will try to guess the Package Manager for installing dependencies in your project but if you want to force your standard or you don't want to take any chances you can use the `-i, --installer` option.\n\n```sh\nnpx twify init -i yarn # Options: npm, yarn, pnpm\n# OR\nnpx twify init --installer yarn\n```\n\n#### Configure Tailwind Prettier\n\nOptionally if you want to install the Tailwind Prettier Plugin also, you can opt for `-p, --pretty` flag. Because this plugin doesn't play well with other prettier plugins it is kept under the flag not a default.\n\n```sh\nnpx twify init -p\n# OR\nnpx twify init --pretty\n```\n\n## :star: Supported Projects\n\nBelow are the list of Supported Projects,\n\n| **Framework**    | **Javascript**     | **Typescript**     |\n| ---------------- | ------------------ | ------------------ |\n| Next 13          | :white_check_mark: | :white_check_mark: |\n| Remix            | :white_check_mark: | :white_check_mark: |\n| Nuxt 2           | :white_check_mark: | :white_check_mark: |\n| Nuxt 3           | :white_check_mark: | :white_check_mark: |\n| Svelte Kit       | :white_check_mark: | :white_check_mark: |\n| Laravel Vite     | :white_check_mark: | :white_check_mark: |\n| Vite             | :white_check_mark: | :white_check_mark: |\n| Angular          | :white_check_mark: | :white_check_mark: |\n| Create React App | :white_check_mark: | :white_check_mark: |\n| Solid JS         | :white_check_mark: | :white_check_mark: |\n| Astro            | :o: WIP            | :o: WIP            |\n| Qwik             | :o: WIP            | :o: WIP            |\n\n## :microscope: Testing\n\nAfter Cloning the repository, install all npm dependencies by running: `npm install`.\n\nThen Run Tests:\n\n```bash\n$ npm run test\n$ npm run coverage\n```\n\n## :date: Change log\n\nPlease see [release history][link-releases] for more information on what has changed recently.\n\n## :heart: Contributing\n\nPlease feel free to contribute ideas and PRs are most welcome.\n\n## :crown: Credits\n\n- [Kazi Mainuddin Ahmed][link-author]\n- [All Contributors][link-contributors]\n\n## :policeman: License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n\n[link-author]: https://github.com/tzsk\n[link-contributors]: ../../contributors\n[link-releases]: ../../releases\n","funding_links":["https://github.com/sponsors/tzsk","https://paypal.me/KMAhmed"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftzsk%2Ftwify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftzsk%2Ftwify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftzsk%2Ftwify/lists"}