{"id":14962247,"url":"https://github.com/notiz-dev/ngx-tailwind","last_synced_at":"2025-04-07T13:08:21.332Z","repository":{"id":42754826,"uuid":"272829646","full_name":"notiz-dev/ngx-tailwind","owner":"notiz-dev","description":"💨   Simple Angular schematic that initializes Tailwind CSS in your project and adds a custom webpack config to your build process.","archived":false,"fork":false,"pushed_at":"2023-02-03T10:39:07.000Z","size":1704,"stargazers_count":128,"open_issues_count":7,"forks_count":9,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-31T11:08:02.716Z","etag":null,"topics":["angular","schematics","tailwind","tailwind-css"],"latest_commit_sha":null,"homepage":"https://notiz.dev/blog/angular-10-with-tailwindcss#use-tailwind-css-utility-classes","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/notiz-dev.png","metadata":{"funding":{"github":"notiz-dev","patreon":"notiz_dev"},"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-16T23:03:42.000Z","updated_at":"2025-03-28T09:56:25.000Z","dependencies_parsed_at":"2023-02-08T08:15:48.973Z","dependency_job_id":null,"html_url":"https://github.com/notiz-dev/ngx-tailwind","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notiz-dev%2Fngx-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notiz-dev%2Fngx-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notiz-dev%2Fngx-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notiz-dev%2Fngx-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/notiz-dev","download_url":"https://codeload.github.com/notiz-dev/ngx-tailwind/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247574084,"owners_count":20960496,"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","schematics","tailwind","tailwind-css"],"created_at":"2024-09-24T13:29:46.414Z","updated_at":"2025-04-07T13:08:21.309Z","avatar_url":"https://github.com/notiz-dev.png","language":"TypeScript","readme":"# Tailwind CSS Schematics\n\n[![npm version](https://badge.fury.io/js/ngx-tailwind.svg)](https://www.npmjs.com/package/ngx-tailwind)\n![Schematics CI](https://github.com/notiz-dev/ngx-tailwind/workflows/Node.js%20CI/badge.svg)\n\nSimple [Angular](https://angular.io/) schematic initializing [Tailwind CSS](https://tailwindcss.com/) in your project. [Angular v11.2](https://twitter.com/angular/status/1359736376581840896) includes native support for Tailwind CSS.\n\nFor all versions **before** Angular v11.2 a custom webpack config is added to your build process.\n\n## Installation\n\nRun\n\n```bash\nng add ngx-tailwind\n\n# or\n\nng add ngx-tailwind --project \u003cMY_PROJECT\u003e\n```\n\nExample output\n\n```bash\nThe package ngx-tailwind@dev will be installed and executed.\nWould you like to proceed? Yes\n✔ Package successfully installed.\n? Which stylesheet format are you using? SCSS [ https://sass-lang.com/documentation/syntax#scss ]\n? Which @tailwindcss plugins do you want to install? typography\nCREATE tailwind.config.js (236 bytes)\nUPDATE package.json (1095 bytes)\nUPDATE src/styles.scss (177 bytes)\n✔ Packages installed successfully.\n```\n\n## Upgrade Guide\n\n### Tailwind CSS v2 to v3\n\nTo upgrade your project from [Tailwind CSS v2 to v3](https://tailwindcss.com/docs/upgrade-guide).\n\n```bash\nnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest\n```\n\nUpdate your `tailwind.config.js` to the new [JIT Engine](https://tailwindcss.com/docs/upgrade-guide#migrating-to-the-jit-engine).\n\n```diff\nmodule.exports = {\n- // mode: 'jit',\n- purge: ['./src/**/*.{html,ts}'],\n+ content: ['./src/**/*.{html,ts}'],\n- darkMode: false, // or 'media' or 'class'\n  theme: {\n    extend: {},\n  },\n- variants: {\n-   extend: {},\n- },\n  plugins: [],\n};\n```\n\nRemove production build script from `package.json`, which was used for purging unused styles. Since JIT Engine generates only used styles this script is not necessary anymore.\n\n```diff\n{\n  \"name\": \"angular-workspace\",\n  \"version\": \"0.0.0\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\",\n    \"watch\": \"ng build --watch --configuration development\",\n-   \"build:prod\": \"cross-env NODE_ENV=production ng build --configuration production\"\n  },\n  \"private\": true,\n  \"dependencies\": {\n    \"@angular/animations\": \"~13.0.3\",\n    \"@angular/common\": \"~13.0.3\",\n    \"@angular/compiler\": \"~13.0.3\",\n    \"@angular/core\": \"~13.0.3\",\n    \"@angular/forms\": \"~13.0.3\",\n    \"@angular/platform-browser\": \"~13.0.3\",\n    \"@angular/platform-browser-dynamic\": \"~13.0.3\",\n    \"@angular/router\": \"~13.0.3\",\n    \"rxjs\": \"~7.4.0\",\n    \"tslib\": \"^2.3.1\",\n    \"zone.js\": \"~0.11.4\"\n  },\n  \"devDependencies\": {\n    \"@angular-devkit/build-angular\": \"~13.0.4\",\n    \"@angular/cli\": \"~13.0.4\",\n    \"@angular/compiler-cli\": \"~13.0.3\",\n    \"@types/node\": \"^12.11.1\",\n    \"autoprefixer\": \"^10.4.1\",\n-   \"cross-env\": \"^7.0.3\",\n    \"postcss\": \"^8.4.5\",\n    \"tailwindcss\": \"^3.0.8\",\n    \"typescript\": \"~4.4.4\"\n  }\n}\n```\n\n## Migrate from Tailwind CSS\n\nTo upgrade you project from [Tailwind CSS v1.x to v2.0](https://tailwindcss.com/docs/upgrading-to-v2) run the following install command\n\n```bash\nnpm i -D tailwindcss@latest autoprefixer@latest postcss@latest postcss-import@latest postcss-loader@latest\n\n# using scss\nnpm i -D postcss-scss@latest\n```\n\nRead the full [Upgrade Guide](https://tailwindcss.com/docs/upgrading-to-v2) to update your custom `tailwind.config.js` (e.g. [your color palette](https://tailwindcss.com/docs/upgrading-to-v2#configure-your-color-palette-explicitly)) and replace removed classes from your template (e.g. [shadow-outline and shadow-xs](https://tailwindcss.com/docs/upgrading-to-v2#replace-shadow-outline-and-shadow-xs-with-ring-utilities)).\n\n## Additional options\n\nYou can pass additional flags to customize the schematic. For example, if you want to install a different version for **Tailwind** use `--tailwindVersion` flag:\n\n```bash\nng add ngx-tailwind --tailwindVersion 3.0.8\n```\n\nAll available flags:\n\n| Flag                   | Description                                                    | Type            | Default                                               |\n| ---------------------- | -------------------------------------------------------------- | --------------- | ----------------------------------------------------- | --- |\n| `autoprefixerVersion`  | The autoprefixer version to be installed.                      | string          | `^10.4.1`                                             |\n| `cssFormat`            | The file extension or preprocessor to use for style files.     | `css` \\| `scss` | `css`                                                 | ‚   |\n| `project`              | The project to initialize with Tailwind CSS.                   | `string`        | **First** Angular project                             |\n| `postcssVersion`       | The postcss version to be installed.                           | `string`        | `^8.4.5`                                              |     |\n| `tailwindVersion`      | The Tailwind version to be installed.                          | `string`        | `^3.0.8`                                              |\n| `disableCrossPlatform` | Set the build:prod script to be only UNIX compatible.          | `boolean`       | `false`                                               |\n| `crossEnvVersion`      | The cross-env version to be installed.                         | `string`        | `^7.0.3`                                              |\n| `tailwindPlugins`      | @tailwindcss plugins installed and added to tailwind.config.js | `string[]`      | [`aspect-ratio`, `forms`, `line-clamp`, `typography`] |\n\nAdvanced usage\n\n```bash\nng add ngx-tailwind --cssFormat scss --tailwindVersion 3.0.8 --postcssVersion 8.4.5\n```\n\nWant to integrate Tailwind CSS with Angular 11.1 or lower? No problem:\n\n```bash\nng add ngx-tailwind@2.3.0\n```\n\nBy default, `cross-env` is added to the `build:prod` script to be able to set `NODE_ENV=prod` cross-platform.\nIf you want to override the default behavior, you can set the flag `--disableCrossPlatform`:\n\n```bash\nng add ngx-tailwind --disableCrossPlatform\n```\n\n## Developing\n\nInstall `@angular-devkit/schematics-cli` to be able to use `schematics` command\n\n```bash\nnpm i -g @angular-devkit/schematics-cli\n```\n\nNow build the schematics and run the schematic.\n\n```bash\nnpm run build\n# or\nnpm run build:watch\n\n# dry-run in angular-workspace\nnpm run start:dev\n\n# execute schematics in angular-workspace\nnpm run start\n```\n","funding_links":["https://github.com/sponsors/notiz-dev","https://patreon.com/notiz_dev"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotiz-dev%2Fngx-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnotiz-dev%2Fngx-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotiz-dev%2Fngx-tailwind/lists"}