├── .editorconfig ├── .eslintrc.json ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .vscode └── extensions.json ├── README.md ├── angular.json ├── apps ├── .gitkeep ├── app1-e2e │ ├── .eslintrc.json │ ├── cypress.json │ ├── project.json │ ├── src │ │ ├── fixtures │ │ │ └── example.json │ │ ├── integration │ │ │ └── app.spec.ts │ │ └── support │ │ │ ├── app.po.ts │ │ │ ├── commands.ts │ │ │ └── index.ts │ └── tsconfig.json ├── app1 │ ├── .browserslistrc │ ├── .eslintrc.json │ ├── jest.config.js │ ├── project.json │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ └── nx-welcome.component.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test-setup.ts │ ├── tailwind.config.js │ ├── tsconfig.app.json │ ├── tsconfig.editor.json │ ├── tsconfig.json │ └── tsconfig.spec.json ├── app2-e2e │ ├── .eslintrc.json │ ├── cypress.json │ ├── project.json │ ├── src │ │ ├── fixtures │ │ │ └── example.json │ │ ├── integration │ │ │ └── app.spec.ts │ │ └── support │ │ │ ├── app.po.ts │ │ │ ├── commands.ts │ │ │ └── index.ts │ └── tsconfig.json └── app2 │ ├── .browserslistrc │ ├── .eslintrc.json │ ├── jest.config.js │ ├── project.json │ ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── nx-welcome.component.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test-setup.ts │ ├── tailwind.config.js │ ├── tsconfig.app.json │ ├── tsconfig.editor.json │ ├── tsconfig.json │ └── tsconfig.spec.json ├── decorate-angular-cli.js ├── jest.config.js ├── jest.preset.js ├── libs ├── .gitkeep ├── lib1 │ ├── .browserslistrc │ ├── .eslintrc.json │ ├── README.md │ ├── jest.config.js │ ├── project.json │ ├── src │ │ ├── index.ts │ │ ├── lib │ │ │ ├── header │ │ │ │ ├── header.component.css │ │ │ │ ├── header.component.html │ │ │ │ ├── header.component.spec.ts │ │ │ │ └── header.component.ts │ │ │ └── lib1.module.ts │ │ └── test-setup.ts │ ├── tsconfig.json │ ├── tsconfig.lib.json │ └── tsconfig.spec.json ├── lib2 │ ├── .browserslistrc │ ├── .eslintrc.json │ ├── README.md │ ├── jest.config.js │ ├── ng-package.json │ ├── package.json │ ├── project.json │ ├── src │ │ ├── index.ts │ │ ├── lib │ │ │ ├── card │ │ │ │ ├── card.component.css │ │ │ │ ├── card.component.html │ │ │ │ ├── card.component.spec.ts │ │ │ │ └── card.component.ts │ │ │ └── lib2.module.ts │ │ └── test-setup.ts │ ├── tailwind.config.js │ ├── tsconfig.json │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ └── tsconfig.spec.json ├── lib3 │ ├── .browserslistrc │ ├── .eslintrc.json │ ├── README.md │ ├── jest.config.js │ ├── ng-package.json │ ├── package.json │ ├── project.json │ ├── src │ │ ├── index.ts │ │ ├── lib │ │ │ ├── button │ │ │ │ ├── button.component.css │ │ │ │ ├── button.component.html │ │ │ │ ├── button.component.spec.ts │ │ │ │ └── button.component.ts │ │ │ └── lib3.module.ts │ │ ├── styles │ │ │ ├── indigo.css │ │ │ └── teal.css │ │ └── test-setup.ts │ ├── tailwind.config.js │ ├── tsconfig.json │ ├── tsconfig.lib.json │ ├── tsconfig.lib.prod.json │ └── tsconfig.spec.json └── tailwind-preset │ ├── project.json │ └── tailwind.config.js ├── nx.json ├── package.json ├── tools ├── generators │ └── .gitkeep ├── scripts │ └── remove-dir.js └── tsconfig.tools.json ├── tsconfig.base.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "ignorePatterns": ["**/*"], 4 | "plugins": ["@nrwl/nx"], 5 | "overrides": [ 6 | { 7 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 8 | "rules": { 9 | "@nrwl/nx/enforce-module-boundaries": [ 10 | "error", 11 | { 12 | "enforceBuildableLibDependency": true, 13 | "allow": [], 14 | "depConstraints": [ 15 | { 16 | "sourceTag": "*", 17 | "onlyDependOnLibsWithTags": ["*"] 18 | } 19 | ] 20 | } 21 | ] 22 | } 23 | }, 24 | { 25 | "files": ["*.ts", "*.tsx"], 26 | "extends": ["plugin:@nrwl/nx/typescript"], 27 | "rules": {} 28 | }, 29 | { 30 | "files": ["*.js", "*.jsx"], 31 | "extends": ["plugin:@nrwl/nx/javascript"], 32 | "rules": {} 33 | } 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | yarn-error.log 34 | testem.log 35 | /typings 36 | 37 | # System Files 38 | .DS_Store 39 | Thumbs.db 40 | 41 | .angular 42 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Add files here to ignore them from prettier formatting 2 | 3 | /dist 4 | /coverage 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "angular.ng-template", 4 | "nrwl.angular-console", 5 | "esbenp.prettier-vscode", 6 | "firsttris.vscode-jest-runner", 7 | "dbaeumer.vscode-eslint" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Blog post source code: Set up Tailwind CSS with Angular in an Nx workspace 2 | 3 | This is the source code for the blog post [Set up Tailwind CSS with Angular in an Nx workspace](). 4 | 5 | Every commit in this repository correspond to a section in the blog post. You can see the source code for each section by inspecting the corresponding commit. 6 | 7 | ## See also 8 | 9 | - [Nrwl](https://nrwl.io) 10 | - [Nx](https://nx.dev) 11 | - [Nx Cloud](https://nx.app) 12 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2, 3 | "projects": { 4 | "app1": "apps/app1", 5 | "app1-e2e": "apps/app1-e2e", 6 | "app2": "apps/app2", 7 | "app2-e2e": "apps/app2-e2e", 8 | "lib1": "libs/lib1", 9 | "lib2": "libs/lib2", 10 | "lib3": "libs/lib3", 11 | "tailwind-preset": "libs/tailwind-preset" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /apps/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leosvelperez/angular-tailwind-nx/0e314c97dc8ce424c4763d1911c29f50343b72a1/apps/.gitkeep -------------------------------------------------------------------------------- /apps/app1-e2e/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | }, 9 | { 10 | "files": ["src/plugins/index.js"], 11 | "rules": { 12 | "@typescript-eslint/no-var-requires": "off", 13 | "no-undef": "off" 14 | } 15 | } 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /apps/app1-e2e/cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "fileServerFolder": ".", 3 | "fixturesFolder": "./src/fixtures", 4 | "integrationFolder": "./src/integration", 5 | "modifyObstructiveCode": false, 6 | "supportFile": "./src/support/index.ts", 7 | "pluginsFile": false, 8 | "video": true, 9 | "videosFolder": "../../dist/cypress/apps/app1-e2e/videos", 10 | "screenshotsFolder": "../../dist/cypress/apps/app1-e2e/screenshots", 11 | "chromeWebSecurity": false 12 | } 13 | -------------------------------------------------------------------------------- /apps/app1-e2e/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "apps/app1-e2e", 3 | "sourceRoot": "apps/app1-e2e/src", 4 | "projectType": "application", 5 | "targets": { 6 | "e2e": { 7 | "executor": "@nrwl/cypress:cypress", 8 | "options": { 9 | "cypressConfig": "apps/app1-e2e/cypress.json", 10 | "devServerTarget": "app1:serve:development" 11 | }, 12 | "configurations": { 13 | "production": { 14 | "devServerTarget": "app1:serve:production" 15 | } 16 | } 17 | }, 18 | "lint": { 19 | "executor": "@nrwl/linter:eslint", 20 | "outputs": ["{options.outputFile}"], 21 | "options": { 22 | "lintFilePatterns": ["apps/app1-e2e/**/*.{js,ts}"] 23 | } 24 | } 25 | }, 26 | "tags": [], 27 | "implicitDependencies": ["app1"] 28 | } 29 | -------------------------------------------------------------------------------- /apps/app1-e2e/src/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io" 4 | } 5 | -------------------------------------------------------------------------------- /apps/app1-e2e/src/integration/app.spec.ts: -------------------------------------------------------------------------------- 1 | import { getHeader } from '../support/app.po'; 2 | 3 | describe('app1', () => { 4 | beforeEach(() => cy.visit('/')); 5 | 6 | it('should display header', () => { 7 | // Custom command example, see `../support/commands.ts` file 8 | cy.login('my-email@something.com', 'myPassword'); 9 | 10 | // Function helper example, see `../support/app.po.ts` file 11 | getHeader().contains('Angular + Tailwind CSS + Nx'); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /apps/app1-e2e/src/support/app.po.ts: -------------------------------------------------------------------------------- 1 | export const getHeader = () => cy.get('header'); 2 | -------------------------------------------------------------------------------- /apps/app1-e2e/src/support/commands.ts: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | 11 | // eslint-disable-next-line @typescript-eslint/no-namespace 12 | declare namespace Cypress { 13 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 14 | interface Chainable { 15 | login(email: string, password: string): void; 16 | } 17 | } 18 | // 19 | // -- This is a parent command -- 20 | Cypress.Commands.add('login', (email, password) => { 21 | console.log('Custom command example: Login', email, password); 22 | }); 23 | // 24 | // -- This is a child command -- 25 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 26 | // 27 | // 28 | // -- This is a dual command -- 29 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 30 | // 31 | // 32 | // -- This will overwrite an existing command -- 33 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 34 | -------------------------------------------------------------------------------- /apps/app1-e2e/src/support/index.ts: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands'; 18 | -------------------------------------------------------------------------------- /apps/app1-e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "sourceMap": false, 5 | "outDir": "../../dist/out-tsc", 6 | "allowJs": true, 7 | "types": ["cypress", "node"], 8 | "forceConsistentCasingInFileNames": true, 9 | "strict": true, 10 | "noImplicitOverride": true, 11 | "noPropertyAccessFromIndexSignature": true, 12 | "noImplicitReturns": true, 13 | "noFallthroughCasesInSwitch": true 14 | }, 15 | "include": ["src/**/*.ts", "src/**/*.js"], 16 | "angularCompilerOptions": { 17 | "strictInjectionParameters": true, 18 | "strictInputAccessModifiers": true, 19 | "strictTemplates": true 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /apps/app1/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | -------------------------------------------------------------------------------- /apps/app1/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts"], 7 | "extends": [ 8 | "plugin:@nrwl/nx/angular", 9 | "plugin:@angular-eslint/template/process-inline-templates" 10 | ], 11 | "rules": { 12 | "@angular-eslint/directive-selector": [ 13 | "error", 14 | { 15 | "type": "attribute", 16 | "prefix": "angularTailwindNx", 17 | "style": "camelCase" 18 | } 19 | ], 20 | "@angular-eslint/component-selector": [ 21 | "error", 22 | { 23 | "type": "element", 24 | "prefix": "angular-tailwind-nx", 25 | "style": "kebab-case" 26 | } 27 | ] 28 | } 29 | }, 30 | { 31 | "files": ["*.html"], 32 | "extends": ["plugin:@nrwl/nx/angular-template"], 33 | "rules": {} 34 | } 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /apps/app1/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | displayName: 'app1', 3 | preset: '../../jest.preset.js', 4 | setupFilesAfterEnv: ['/src/test-setup.ts'], 5 | globals: { 6 | 'ts-jest': { 7 | tsconfig: '/tsconfig.spec.json', 8 | stringifyContentPathRegex: '\\.(html|svg)$', 9 | }, 10 | }, 11 | coverageDirectory: '../../coverage/apps/app1', 12 | transform: { 13 | '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular', 14 | }, 15 | transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], 16 | snapshotSerializers: [ 17 | 'jest-preset-angular/build/serializers/no-ng-attributes', 18 | 'jest-preset-angular/build/serializers/ng-snapshot', 19 | 'jest-preset-angular/build/serializers/html-comment', 20 | ], 21 | }; 22 | -------------------------------------------------------------------------------- /apps/app1/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "projectType": "application", 3 | "root": "apps/app1", 4 | "sourceRoot": "apps/app1/src", 5 | "prefix": "angular-tailwind-nx", 6 | "targets": { 7 | "build": { 8 | "executor": "@nrwl/angular:webpack-browser", 9 | "outputs": ["{options.outputPath}"], 10 | "options": { 11 | "outputPath": "dist/apps/app1", 12 | "index": "apps/app1/src/index.html", 13 | "main": "apps/app1/src/main.ts", 14 | "polyfills": "apps/app1/src/polyfills.ts", 15 | "tsConfig": "apps/app1/tsconfig.app.json", 16 | "assets": ["apps/app1/src/favicon.ico", "apps/app1/src/assets"], 17 | "styles": ["apps/app1/src/styles.css"], 18 | "scripts": [] 19 | }, 20 | "configurations": { 21 | "production": { 22 | "budgets": [ 23 | { 24 | "type": "initial", 25 | "maximumWarning": "500kb", 26 | "maximumError": "1mb" 27 | }, 28 | { 29 | "type": "anyComponentStyle", 30 | "maximumWarning": "2kb", 31 | "maximumError": "4kb" 32 | } 33 | ], 34 | "fileReplacements": [ 35 | { 36 | "replace": "apps/app1/src/environments/environment.ts", 37 | "with": "apps/app1/src/environments/environment.prod.ts" 38 | } 39 | ], 40 | "outputHashing": "all" 41 | }, 42 | "development": { 43 | "buildOptimizer": false, 44 | "optimization": false, 45 | "vendorChunk": true, 46 | "extractLicenses": false, 47 | "sourceMap": true, 48 | "namedChunks": true 49 | } 50 | }, 51 | "defaultConfiguration": "production" 52 | }, 53 | "serve": { 54 | "executor": "@nrwl/web:file-server", 55 | "configurations": { 56 | "production": { 57 | "buildTarget": "app1:build:production" 58 | }, 59 | "development": { 60 | "buildTarget": "app1:build:development" 61 | } 62 | }, 63 | "defaultConfiguration": "development" 64 | }, 65 | "extract-i18n": { 66 | "executor": "@angular-devkit/build-angular:extract-i18n", 67 | "options": { 68 | "browserTarget": "app1:build" 69 | } 70 | }, 71 | "lint": { 72 | "executor": "@nrwl/linter:eslint", 73 | "options": { 74 | "lintFilePatterns": ["apps/app1/src/**/*.ts", "apps/app1/src/**/*.html"] 75 | } 76 | }, 77 | "test": { 78 | "executor": "@nrwl/jest:jest", 79 | "outputs": ["coverage/apps/app1"], 80 | "options": { 81 | "jestConfig": "apps/app1/jest.config.js", 82 | "passWithNoTests": true 83 | } 84 | } 85 | }, 86 | "tags": [] 87 | } 88 | -------------------------------------------------------------------------------- /apps/app1/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leosvelperez/angular-tailwind-nx/0e314c97dc8ce424c4763d1911c29f50343b72a1/apps/app1/src/app/app.component.css -------------------------------------------------------------------------------- /apps/app1/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
7 | 8 | Angular is an application design framework and development platform for 9 | creating efficient and sophisticated single-page apps. 10 | 11 | 12 | 16 | Tailwind CSS is a utility-first CSS framework packed with classes like 17 | flex, pt-4, text-center and rotate-90 that can be composed to build any 18 | design, directly in your markup. 19 | 20 | 21 | 22 | Nx is a smart, fast and extensible build system with first class monorepo 23 | support and powerful integrations. 24 | 25 |
26 |
27 | -------------------------------------------------------------------------------- /apps/app1/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { Lib1Module } from '@angular-tailwind-nx/lib1'; 2 | import { Lib2Module } from '@angular-tailwind-nx/lib2'; 3 | import { TestBed } from '@angular/core/testing'; 4 | import { AppComponent } from './app.component'; 5 | import { NxWelcomeComponent } from './nx-welcome.component'; 6 | 7 | describe('AppComponent', () => { 8 | beforeEach(async () => { 9 | await TestBed.configureTestingModule({ 10 | declarations: [AppComponent, NxWelcomeComponent], 11 | imports: [Lib1Module, Lib2Module], 12 | }).compileComponents(); 13 | }); 14 | 15 | it('should create the app', () => { 16 | const fixture = TestBed.createComponent(AppComponent); 17 | const app = fixture.componentInstance; 18 | expect(app).toBeTruthy(); 19 | }); 20 | 21 | it(`should have as title 'app1'`, () => { 22 | const fixture = TestBed.createComponent(AppComponent); 23 | const app = fixture.componentInstance; 24 | expect(app.title).toEqual('app1'); 25 | }); 26 | 27 | it('should render title', () => { 28 | const fixture = TestBed.createComponent(AppComponent); 29 | fixture.detectChanges(); 30 | const compiled = fixture.nativeElement as HTMLElement; 31 | expect(compiled.querySelector('header')?.textContent).toContain('Tailwind CSS'); 32 | }); 33 | }); 34 | -------------------------------------------------------------------------------- /apps/app1/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'angular-tailwind-nx-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'], 7 | }) 8 | export class AppComponent { 9 | title = 'app1'; 10 | } 11 | -------------------------------------------------------------------------------- /apps/app1/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | import { NxWelcomeComponent } from './nx-welcome.component'; 5 | import { Lib1Module } from '@angular-tailwind-nx/lib1'; 6 | import { Lib2Module } from '@angular-tailwind-nx/lib2'; 7 | 8 | @NgModule({ 9 | declarations: [AppComponent, NxWelcomeComponent], 10 | imports: [BrowserModule, Lib1Module, Lib2Module], 11 | providers: [], 12 | bootstrap: [AppComponent], 13 | }) 14 | export class AppModule {} 15 | -------------------------------------------------------------------------------- /apps/app1/src/app/nx-welcome.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, ViewEncapsulation } from '@angular/core'; 2 | 3 | /* eslint-disable */ 4 | 5 | @Component({ 6 | selector: 'angular-tailwind-nx-nx-welcome', 7 | template: ` 8 | 15 | 430 |
431 |
432 | 433 |
434 |

435 | Hello there, 436 | Welcome app1 👋 437 |

438 |
439 | 440 | 441 |
442 |
443 |

444 | 450 | 456 | 457 | You're up and running 458 |

459 | What's next? 460 |
461 |
462 | 468 | 471 | 472 |
473 |
474 | 475 | 476 |
477 | 667 | 748 |
749 | 750 | 751 |
752 |

Next steps

753 |

Here are some things you can do with Nx:

754 |
755 | 756 | 762 | 768 | 769 | Add UI library 770 | 771 | 
# Generate UI lib
772 | nx g @nrwl/angular:lib ui
773 | 
774 | # Add a component
775 | nx g @nrwl/angular:component button --project ui
776 |
777 |
778 | 779 | 785 | 791 | 792 | View interactive project graph 793 | 794 | 
nx graph
795 |
796 |
797 | 798 | 804 | 810 | 811 | Run affected commands 812 | 813 | 
# see what's been affected by changes
814 | nx affected:graph
815 | 
816 | # run tests for current changes
817 | nx affected:test
818 | 
819 | # run e2e tests for current changes
820 | nx affected:e2e
821 |
822 |
823 | 824 |

825 | Carefully crafted with 826 | 832 | 838 | 839 |

840 |
841 |
842 | `, 843 | encapsulation: ViewEncapsulation.None, 844 | }) 845 | export class NxWelcomeComponent implements OnInit { 846 | constructor() {} 847 | 848 | ngOnInit(): void {} 849 | } 850 | -------------------------------------------------------------------------------- /apps/app1/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leosvelperez/angular-tailwind-nx/0e314c97dc8ce424c4763d1911c29f50343b72a1/apps/app1/src/assets/.gitkeep -------------------------------------------------------------------------------- /apps/app1/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | }; 4 | -------------------------------------------------------------------------------- /apps/app1/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false, 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /apps/app1/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leosvelperez/angular-tailwind-nx/0e314c97dc8ce424c4763d1911c29f50343b72a1/apps/app1/src/favicon.ico -------------------------------------------------------------------------------- /apps/app1/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | App1 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /apps/app1/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic() 12 | .bootstrapModule(AppModule) 13 | .catch((err) => console.error(err)); 14 | -------------------------------------------------------------------------------- /apps/app1/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes recent versions of Safari, Chrome (including 12 | * Opera), Edge on the desktop, and iOS and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** 22 | * By default, zone.js will patch all possible macroTask and DomEvents 23 | * user can disable parts of macroTask/DomEvents patch by setting following flags 24 | * because those flags need to be set before `zone.js` being loaded, and webpack 25 | * will put import in the top of bundle, so user need to create a separate file 26 | * in this directory (for example: zone-flags.ts), and put the following flags 27 | * into that file, and then add the following code before importing zone.js. 28 | * import './zone-flags'; 29 | * 30 | * The flags allowed in zone-flags.ts are listed here. 31 | * 32 | * The following flags will work for all browsers. 33 | * 34 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 35 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 36 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 37 | * 38 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 39 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 40 | * 41 | * (window as any).__Zone_enable_cross_context_check = true; 42 | * 43 | */ 44 | 45 | /*************************************************************************************************** 46 | * Zone JS is required by default for Angular itself. 47 | */ 48 | import 'zone.js'; // Included with Angular CLI. 49 | 50 | /*************************************************************************************************** 51 | * APPLICATION IMPORTS 52 | */ 53 | -------------------------------------------------------------------------------- /apps/app1/src/styles.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | /* Colors */ 7 | --primary-light: #5eead4; 8 | --primary: #14b8a6; 9 | --primary-dark: #0f766e; 10 | --secondary-light: #bae6fd; 11 | --secondary: #0ea5e9; 12 | --secondary-dark: #0369a1; 13 | --white: #ffffff; 14 | --black: #000000; 15 | 16 | /* Spacing */ 17 | --spacing-sm: 0.5rem; 18 | --spacing-md: 1rem; 19 | --spacing-lg: 1.5rem; 20 | --spacing-xl: 2rem; 21 | } 22 | -------------------------------------------------------------------------------- /apps/app1/src/test-setup.ts: -------------------------------------------------------------------------------- 1 | import 'jest-preset-angular/setup-jest'; 2 | -------------------------------------------------------------------------------- /apps/app1/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind'); 2 | const { join } = require('path'); 3 | const sharedTailwindConfig = require('../../libs/tailwind-preset/tailwind.config'); 4 | 5 | module.exports = { 6 | presets: [sharedTailwindConfig], 7 | content: [ 8 | join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'), 9 | ...createGlobPatternsForDependencies(__dirname), 10 | ], 11 | }; 12 | -------------------------------------------------------------------------------- /apps/app1/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "types": [], 6 | "target": "ES2017" 7 | }, 8 | "files": ["src/main.ts", "src/polyfills.ts"], 9 | "include": ["src/**/*.d.ts"], 10 | "exclude": ["**/*.test.ts", "**/*.spec.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /apps/app1/tsconfig.editor.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "include": ["**/*.ts"], 4 | "compilerOptions": { 5 | "types": ["jest", "node"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /apps/app1/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "files": [], 4 | "include": [], 5 | "references": [ 6 | { 7 | "path": "./tsconfig.app.json" 8 | }, 9 | { 10 | "path": "./tsconfig.spec.json" 11 | }, 12 | { 13 | "path": "./tsconfig.editor.json" 14 | } 15 | ], 16 | "compilerOptions": { 17 | "forceConsistentCasingInFileNames": true, 18 | "strict": true, 19 | "noImplicitOverride": true, 20 | "noPropertyAccessFromIndexSignature": true, 21 | "noImplicitReturns": true, 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "angularCompilerOptions": { 25 | "strictInjectionParameters": true, 26 | "strictInputAccessModifiers": true, 27 | "strictTemplates": true 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /apps/app1/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "files": ["src/test-setup.ts"], 9 | "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /apps/app2-e2e/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | } 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /apps/app2-e2e/cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "fileServerFolder": ".", 3 | "fixturesFolder": "./src/fixtures", 4 | "integrationFolder": "./src/integration", 5 | "modifyObstructiveCode": false, 6 | "supportFile": "./src/support/index.ts", 7 | "pluginsFile": false, 8 | "video": true, 9 | "videosFolder": "../../dist/cypress/apps/app2-e2e/videos", 10 | "screenshotsFolder": "../../dist/cypress/apps/app2-e2e/screenshots", 11 | "chromeWebSecurity": false 12 | } 13 | -------------------------------------------------------------------------------- /apps/app2-e2e/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "apps/app2-e2e", 3 | "sourceRoot": "apps/app2-e2e/src", 4 | "projectType": "application", 5 | "targets": { 6 | "e2e": { 7 | "executor": "@nrwl/cypress:cypress", 8 | "options": { 9 | "cypressConfig": "apps/app2-e2e/cypress.json", 10 | "devServerTarget": "app2:serve:development" 11 | }, 12 | "configurations": { 13 | "production": { 14 | "devServerTarget": "app2:serve:production" 15 | } 16 | } 17 | }, 18 | "lint": { 19 | "executor": "@nrwl/linter:eslint", 20 | "outputs": ["{options.outputFile}"], 21 | "options": { 22 | "lintFilePatterns": ["apps/app2-e2e/**/*.{js,ts}"] 23 | } 24 | } 25 | }, 26 | "tags": [], 27 | "implicitDependencies": ["app2"] 28 | } 29 | -------------------------------------------------------------------------------- /apps/app2-e2e/src/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io" 4 | } 5 | -------------------------------------------------------------------------------- /apps/app2-e2e/src/integration/app.spec.ts: -------------------------------------------------------------------------------- 1 | import { getHeader } from '../support/app.po'; 2 | 3 | describe('app2', () => { 4 | beforeEach(() => cy.visit('/')); 5 | 6 | it('should display header', () => { 7 | // Custom command example, see `../support/commands.ts` file 8 | cy.login('my-email@something.com', 'myPassword'); 9 | 10 | // Function helper example, see `../support/app.po.ts` file 11 | getHeader().contains('Angular + Tailwind CSS + Nx'); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /apps/app2-e2e/src/support/app.po.ts: -------------------------------------------------------------------------------- 1 | export const getHeader = () => cy.get('header'); 2 | -------------------------------------------------------------------------------- /apps/app2-e2e/src/support/commands.ts: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | 11 | // eslint-disable-next-line @typescript-eslint/no-namespace 12 | declare namespace Cypress { 13 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 14 | interface Chainable { 15 | login(email: string, password: string): void; 16 | } 17 | } 18 | // 19 | // -- This is a parent command -- 20 | Cypress.Commands.add('login', (email, password) => { 21 | console.log('Custom command example: Login', email, password); 22 | }); 23 | // 24 | // -- This is a child command -- 25 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 26 | // 27 | // 28 | // -- This is a dual command -- 29 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 30 | // 31 | // 32 | // -- This will overwrite an existing command -- 33 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 34 | -------------------------------------------------------------------------------- /apps/app2-e2e/src/support/index.ts: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands'; 18 | -------------------------------------------------------------------------------- /apps/app2-e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "sourceMap": false, 5 | "outDir": "../../dist/out-tsc", 6 | "allowJs": true, 7 | "types": ["cypress", "node"], 8 | "forceConsistentCasingInFileNames": true, 9 | "strict": true, 10 | "noImplicitOverride": true, 11 | "noPropertyAccessFromIndexSignature": true, 12 | "noImplicitReturns": true, 13 | "noFallthroughCasesInSwitch": true 14 | }, 15 | "include": ["src/**/*.ts", "src/**/*.js"], 16 | "angularCompilerOptions": { 17 | "strictInjectionParameters": true, 18 | "strictInputAccessModifiers": true, 19 | "strictTemplates": true 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /apps/app2/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | -------------------------------------------------------------------------------- /apps/app2/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts"], 7 | "extends": [ 8 | "plugin:@nrwl/nx/angular", 9 | "plugin:@angular-eslint/template/process-inline-templates" 10 | ], 11 | "rules": { 12 | "@angular-eslint/directive-selector": [ 13 | "error", 14 | { 15 | "type": "attribute", 16 | "prefix": "angularTailwindNx", 17 | "style": "camelCase" 18 | } 19 | ], 20 | "@angular-eslint/component-selector": [ 21 | "error", 22 | { 23 | "type": "element", 24 | "prefix": "angular-tailwind-nx", 25 | "style": "kebab-case" 26 | } 27 | ] 28 | } 29 | }, 30 | { 31 | "files": ["*.html"], 32 | "extends": ["plugin:@nrwl/nx/angular-template"], 33 | "rules": {} 34 | } 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /apps/app2/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | displayName: 'app2', 3 | preset: '../../jest.preset.js', 4 | setupFilesAfterEnv: ['/src/test-setup.ts'], 5 | globals: { 6 | 'ts-jest': { 7 | tsconfig: '/tsconfig.spec.json', 8 | stringifyContentPathRegex: '\\.(html|svg)$', 9 | }, 10 | }, 11 | coverageDirectory: '../../coverage/apps/app2', 12 | transform: { 13 | '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular', 14 | }, 15 | transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], 16 | snapshotSerializers: [ 17 | 'jest-preset-angular/build/serializers/no-ng-attributes', 18 | 'jest-preset-angular/build/serializers/ng-snapshot', 19 | 'jest-preset-angular/build/serializers/html-comment', 20 | ], 21 | }; 22 | -------------------------------------------------------------------------------- /apps/app2/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "projectType": "application", 3 | "root": "apps/app2", 4 | "sourceRoot": "apps/app2/src", 5 | "prefix": "angular-tailwind-nx", 6 | "targets": { 7 | "build": { 8 | "executor": "@nrwl/angular:webpack-browser", 9 | "outputs": ["{options.outputPath}"], 10 | "options": { 11 | "outputPath": "dist/apps/app2", 12 | "index": "apps/app2/src/index.html", 13 | "main": "apps/app2/src/main.ts", 14 | "polyfills": "apps/app2/src/polyfills.ts", 15 | "tsConfig": "apps/app2/tsconfig.app.json", 16 | "assets": ["apps/app2/src/favicon.ico", "apps/app2/src/assets"], 17 | "styles": ["apps/app2/src/styles.css"], 18 | "scripts": [] 19 | }, 20 | "configurations": { 21 | "production": { 22 | "budgets": [ 23 | { 24 | "type": "initial", 25 | "maximumWarning": "500kb", 26 | "maximumError": "1mb" 27 | }, 28 | { 29 | "type": "anyComponentStyle", 30 | "maximumWarning": "2kb", 31 | "maximumError": "4kb" 32 | } 33 | ], 34 | "fileReplacements": [ 35 | { 36 | "replace": "apps/app2/src/environments/environment.ts", 37 | "with": "apps/app2/src/environments/environment.prod.ts" 38 | } 39 | ], 40 | "outputHashing": "all" 41 | }, 42 | "development": { 43 | "buildOptimizer": false, 44 | "optimization": false, 45 | "vendorChunk": true, 46 | "extractLicenses": false, 47 | "sourceMap": true, 48 | "namedChunks": true 49 | } 50 | }, 51 | "defaultConfiguration": "production" 52 | }, 53 | "serve": { 54 | "executor": "@nrwl/web:file-server", 55 | "configurations": { 56 | "production": { 57 | "buildTarget": "app2:build:production" 58 | }, 59 | "development": { 60 | "buildTarget": "app2:build:development" 61 | } 62 | }, 63 | "defaultConfiguration": "development" 64 | }, 65 | "extract-i18n": { 66 | "executor": "@angular-devkit/build-angular:extract-i18n", 67 | "options": { 68 | "browserTarget": "app2:build" 69 | } 70 | }, 71 | "lint": { 72 | "executor": "@nrwl/linter:eslint", 73 | "options": { 74 | "lintFilePatterns": ["apps/app2/src/**/*.ts", "apps/app2/src/**/*.html"] 75 | } 76 | }, 77 | "test": { 78 | "executor": "@nrwl/jest:jest", 79 | "outputs": ["coverage/apps/app2"], 80 | "options": { 81 | "jestConfig": "apps/app2/jest.config.js", 82 | "passWithNoTests": true 83 | } 84 | } 85 | }, 86 | "tags": [] 87 | } 88 | -------------------------------------------------------------------------------- /apps/app2/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leosvelperez/angular-tailwind-nx/0e314c97dc8ce424c4763d1911c29f50343b72a1/apps/app2/src/app/app.component.css -------------------------------------------------------------------------------- /apps/app2/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
7 | 8 | Angular is an application design framework and development platform for 9 | creating efficient and sophisticated single-page apps. 10 | 11 | 12 | 16 | Tailwind CSS is a utility-first CSS framework packed with classes like 17 | flex, pt-4, text-center and rotate-90 that can be composed to build any 18 | design, directly in your markup. 19 | 20 | 21 | 22 | Nx is a smart, fast and extensible build system with first class monorepo 23 | support and powerful integrations. 24 | 25 |
26 |
27 | -------------------------------------------------------------------------------- /apps/app2/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { Lib1Module } from '@angular-tailwind-nx/lib1'; 2 | import { Lib2Module } from '@angular-tailwind-nx/lib2'; 3 | import { TestBed } from '@angular/core/testing'; 4 | import { AppComponent } from './app.component'; 5 | import { NxWelcomeComponent } from './nx-welcome.component'; 6 | 7 | describe('AppComponent', () => { 8 | beforeEach(async () => { 9 | await TestBed.configureTestingModule({ 10 | declarations: [AppComponent, NxWelcomeComponent], 11 | imports: [Lib1Module, Lib2Module] 12 | }).compileComponents(); 13 | }); 14 | 15 | it('should create the app', () => { 16 | const fixture = TestBed.createComponent(AppComponent); 17 | const app = fixture.componentInstance; 18 | expect(app).toBeTruthy(); 19 | }); 20 | 21 | it(`should have as title 'app2'`, () => { 22 | const fixture = TestBed.createComponent(AppComponent); 23 | const app = fixture.componentInstance; 24 | expect(app.title).toEqual('app2'); 25 | }); 26 | 27 | it('should render title', () => { 28 | const fixture = TestBed.createComponent(AppComponent); 29 | fixture.detectChanges(); 30 | const compiled = fixture.nativeElement as HTMLElement; 31 | expect(compiled.querySelector('header')?.textContent).toContain('Tailwind CSS'); 32 | }); 33 | }); 34 | -------------------------------------------------------------------------------- /apps/app2/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'angular-tailwind-nx-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'], 7 | }) 8 | export class AppComponent { 9 | title = 'app2'; 10 | } 11 | -------------------------------------------------------------------------------- /apps/app2/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { AppComponent } from './app.component'; 4 | import { NxWelcomeComponent } from './nx-welcome.component'; 5 | import { Lib1Module } from '@angular-tailwind-nx/lib1'; 6 | import { Lib2Module } from '@angular-tailwind-nx/lib2'; 7 | 8 | @NgModule({ 9 | declarations: [AppComponent, NxWelcomeComponent], 10 | imports: [BrowserModule, Lib1Module, Lib2Module], 11 | providers: [], 12 | bootstrap: [AppComponent], 13 | }) 14 | export class AppModule {} 15 | -------------------------------------------------------------------------------- /apps/app2/src/app/nx-welcome.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, ViewEncapsulation } from '@angular/core'; 2 | 3 | /* eslint-disable */ 4 | 5 | @Component({ 6 | selector: 'angular-tailwind-nx-nx-welcome', 7 | template: ` 8 | 15 | 430 |
431 |
432 | 433 |
434 |

435 | Hello there, 436 | Welcome app2 👋 437 |

438 |
439 | 440 | 441 |
442 |
443 |

444 | 450 | 456 | 457 | You're up and running 458 |

459 | What's next? 460 |
461 |
462 | 468 | 471 | 472 |
473 |
474 | 475 | 476 |
477 | 667 | 748 |
749 | 750 | 751 |
752 |

Next steps

753 |

Here are some things you can do with Nx:

754 |
755 | 756 | 762 | 768 | 769 | Add UI library 770 | 771 | 
# Generate UI lib
772 | nx g @nrwl/angular:lib ui
773 | 
774 | # Add a component
775 | nx g @nrwl/angular:component button --project ui
776 |
777 |
778 | 779 | 785 | 791 | 792 | View interactive project graph 793 | 794 | 
nx graph
795 |
796 |
797 | 798 | 804 | 810 | 811 | Run affected commands 812 | 813 | 
# see what's been affected by changes
814 | nx affected:graph
815 | 
816 | # run tests for current changes
817 | nx affected:test
818 | 
819 | # run e2e tests for current changes
820 | nx affected:e2e
821 |
822 |
823 | 824 |

825 | Carefully crafted with 826 | 832 | 838 | 839 |

840 |
841 |
842 | `, 843 | encapsulation: ViewEncapsulation.None, 844 | }) 845 | export class NxWelcomeComponent implements OnInit { 846 | constructor() {} 847 | 848 | ngOnInit(): void {} 849 | } 850 | -------------------------------------------------------------------------------- /apps/app2/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leosvelperez/angular-tailwind-nx/0e314c97dc8ce424c4763d1911c29f50343b72a1/apps/app2/src/assets/.gitkeep -------------------------------------------------------------------------------- /apps/app2/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | }; 4 | -------------------------------------------------------------------------------- /apps/app2/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false, 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /apps/app2/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leosvelperez/angular-tailwind-nx/0e314c97dc8ce424c4763d1911c29f50343b72a1/apps/app2/src/favicon.ico -------------------------------------------------------------------------------- /apps/app2/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | App2 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /apps/app2/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic() 12 | .bootstrapModule(AppModule) 13 | .catch((err) => console.error(err)); 14 | -------------------------------------------------------------------------------- /apps/app2/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes recent versions of Safari, Chrome (including 12 | * Opera), Edge on the desktop, and iOS and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** 22 | * By default, zone.js will patch all possible macroTask and DomEvents 23 | * user can disable parts of macroTask/DomEvents patch by setting following flags 24 | * because those flags need to be set before `zone.js` being loaded, and webpack 25 | * will put import in the top of bundle, so user need to create a separate file 26 | * in this directory (for example: zone-flags.ts), and put the following flags 27 | * into that file, and then add the following code before importing zone.js. 28 | * import './zone-flags'; 29 | * 30 | * The flags allowed in zone-flags.ts are listed here. 31 | * 32 | * The following flags will work for all browsers. 33 | * 34 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 35 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 36 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 37 | * 38 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 39 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 40 | * 41 | * (window as any).__Zone_enable_cross_context_check = true; 42 | * 43 | */ 44 | 45 | /*************************************************************************************************** 46 | * Zone JS is required by default for Angular itself. 47 | */ 48 | import 'zone.js'; // Included with Angular CLI. 49 | 50 | /*************************************************************************************************** 51 | * APPLICATION IMPORTS 52 | */ 53 | -------------------------------------------------------------------------------- /apps/app2/src/styles.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | /* Colors */ 7 | --primary-light: #a5b4fc; 8 | --primary: #6366f1; 9 | --primary-dark: #4338ca; 10 | --secondary-light: #e9d5ff; 11 | --secondary: #a855f7; 12 | --secondary-dark: #7e22ce; 13 | --white: #ffffff; 14 | --black: #000000; 15 | 16 | /* Spacing */ 17 | --spacing-sm: 1rem; 18 | --spacing-md: 1.5rem; 19 | --spacing-lg: 2rem; 20 | --spacing-xl: 3rem; 21 | } 22 | -------------------------------------------------------------------------------- /apps/app2/src/test-setup.ts: -------------------------------------------------------------------------------- 1 | import 'jest-preset-angular/setup-jest'; 2 | -------------------------------------------------------------------------------- /apps/app2/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind'); 2 | const { join } = require('path'); 3 | const sharedTailwindConfig = require('../../libs/tailwind-preset/tailwind.config'); 4 | 5 | module.exports = { 6 | presets: [sharedTailwindConfig], 7 | content: [ 8 | join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'), 9 | ...createGlobPatternsForDependencies(__dirname), 10 | ], 11 | }; 12 | -------------------------------------------------------------------------------- /apps/app2/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "types": [], 6 | "target": "ES2017" 7 | }, 8 | "files": ["src/main.ts", "src/polyfills.ts"], 9 | "include": ["src/**/*.d.ts"], 10 | "exclude": ["**/*.test.ts", "**/*.spec.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /apps/app2/tsconfig.editor.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "include": ["**/*.ts"], 4 | "compilerOptions": { 5 | "types": ["jest", "node"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /apps/app2/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "files": [], 4 | "include": [], 5 | "references": [ 6 | { 7 | "path": "./tsconfig.app.json" 8 | }, 9 | { 10 | "path": "./tsconfig.spec.json" 11 | }, 12 | { 13 | "path": "./tsconfig.editor.json" 14 | } 15 | ], 16 | "compilerOptions": { 17 | "forceConsistentCasingInFileNames": true, 18 | "strict": true, 19 | "noImplicitOverride": true, 20 | "noPropertyAccessFromIndexSignature": true, 21 | "noImplicitReturns": true, 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "angularCompilerOptions": { 25 | "strictInjectionParameters": true, 26 | "strictInputAccessModifiers": true, 27 | "strictTemplates": true 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /apps/app2/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "files": ["src/test-setup.ts"], 9 | "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /decorate-angular-cli.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This file decorates the Angular CLI with the Nx CLI to enable features such as computation caching 3 | * and faster execution of tasks. 4 | * 5 | * It does this by: 6 | * 7 | * - Patching the Angular CLI to warn you in case you accidentally use the undecorated ng command. 8 | * - Symlinking the ng to nx command, so all commands run through the Nx CLI 9 | * - Updating the package.json postinstall script to give you control over this script 10 | * 11 | * The Nx CLI decorates the Angular CLI, so the Nx CLI is fully compatible with it. 12 | * Every command you run should work the same when using the Nx CLI, except faster. 13 | * 14 | * Because of symlinking you can still type `ng build/test/lint` in the terminal. The ng command, in this case, 15 | * will point to nx, which will perform optimizations before invoking ng. So the Angular CLI is always invoked. 16 | * The Nx CLI simply does some optimizations before invoking the Angular CLI. 17 | * 18 | * To opt out of this patch: 19 | * - Replace occurrences of nx with ng in your package.json 20 | * - Remove the script from your postinstall script in your package.json 21 | * - Delete and reinstall your node_modules 22 | */ 23 | 24 | const fs = require('fs'); 25 | const os = require('os'); 26 | const cp = require('child_process'); 27 | const isWindows = os.platform() === 'win32'; 28 | let output; 29 | try { 30 | output = require('@nrwl/workspace').output; 31 | } catch (e) { 32 | console.warn('Angular CLI could not be decorated to enable computation caching. Please ensure @nrwl/workspace is installed.'); 33 | process.exit(0); 34 | } 35 | 36 | /** 37 | * Symlink of ng to nx, so you can keep using `ng build/test/lint` and still 38 | * invoke the Nx CLI and get the benefits of computation caching. 39 | */ 40 | function symlinkNgCLItoNxCLI() { 41 | try { 42 | const ngPath = './node_modules/.bin/ng'; 43 | const nxPath = './node_modules/.bin/nx'; 44 | if (isWindows) { 45 | /** 46 | * This is the most reliable way to create symlink-like behavior on Windows. 47 | * Such that it works in all shells and works with npx. 48 | */ 49 | ['', '.cmd', '.ps1'].forEach(ext => { 50 | if (fs.existsSync(nxPath + ext)) fs.writeFileSync(ngPath + ext, fs.readFileSync(nxPath + ext)); 51 | }); 52 | } else { 53 | // If unix-based, symlink 54 | cp.execSync(`ln -sf ./nx ${ngPath}`); 55 | } 56 | } 57 | catch(e) { 58 | output.error({ title: 'Unable to create a symlink from the Angular CLI to the Nx CLI:' + e.message }); 59 | throw e; 60 | } 61 | } 62 | 63 | try { 64 | symlinkNgCLItoNxCLI(); 65 | require('@nrwl/cli/lib/decorate-cli').decorateCli(); 66 | output.log({ title: 'Angular CLI has been decorated to enable computation caching.' }); 67 | } catch(e) { 68 | output.error({ title: 'Decoration of the Angular CLI did not complete successfully' }); 69 | } 70 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | const { getJestProjects } = require('@nrwl/jest'); 2 | 3 | module.exports = { 4 | projects: getJestProjects(), 5 | }; 6 | -------------------------------------------------------------------------------- /jest.preset.js: -------------------------------------------------------------------------------- 1 | const nxPreset = require('@nrwl/jest/preset'); 2 | 3 | module.exports = { ...nxPreset }; 4 | -------------------------------------------------------------------------------- /libs/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leosvelperez/angular-tailwind-nx/0e314c97dc8ce424c4763d1911c29f50343b72a1/libs/.gitkeep -------------------------------------------------------------------------------- /libs/lib1/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | -------------------------------------------------------------------------------- /libs/lib1/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts"], 7 | "extends": [ 8 | "plugin:@nrwl/nx/angular", 9 | "plugin:@angular-eslint/template/process-inline-templates" 10 | ], 11 | "rules": { 12 | "@angular-eslint/directive-selector": [ 13 | "error", 14 | { 15 | "type": "attribute", 16 | "prefix": "angularTailwindNx", 17 | "style": "camelCase" 18 | } 19 | ], 20 | "@angular-eslint/component-selector": [ 21 | "error", 22 | { 23 | "type": "element", 24 | "prefix": "angular-tailwind-nx", 25 | "style": "kebab-case" 26 | } 27 | ] 28 | } 29 | }, 30 | { 31 | "files": ["*.html"], 32 | "extends": ["plugin:@nrwl/nx/angular-template"], 33 | "rules": {} 34 | } 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /libs/lib1/README.md: -------------------------------------------------------------------------------- 1 | # lib1 2 | 3 | This library was generated with [Nx](https://nx.dev). 4 | 5 | ## Running unit tests 6 | 7 | Run `nx test lib1` to execute the unit tests. 8 | -------------------------------------------------------------------------------- /libs/lib1/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | displayName: 'lib1', 3 | preset: '../../jest.preset.js', 4 | setupFilesAfterEnv: ['/src/test-setup.ts'], 5 | globals: { 6 | 'ts-jest': { 7 | tsconfig: '/tsconfig.spec.json', 8 | stringifyContentPathRegex: '\\.(html|svg)$', 9 | }, 10 | }, 11 | coverageDirectory: '../../coverage/libs/lib1', 12 | transform: { 13 | '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular', 14 | }, 15 | transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], 16 | snapshotSerializers: [ 17 | 'jest-preset-angular/build/serializers/no-ng-attributes', 18 | 'jest-preset-angular/build/serializers/ng-snapshot', 19 | 'jest-preset-angular/build/serializers/html-comment', 20 | ], 21 | }; 22 | -------------------------------------------------------------------------------- /libs/lib1/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "projectType": "library", 3 | "root": "libs/lib1", 4 | "sourceRoot": "libs/lib1/src", 5 | "prefix": "angular-tailwind-nx", 6 | "targets": { 7 | "test": { 8 | "executor": "@nrwl/jest:jest", 9 | "outputs": ["coverage/libs/lib1"], 10 | "options": { 11 | "jestConfig": "libs/lib1/jest.config.js", 12 | "passWithNoTests": true 13 | } 14 | }, 15 | "lint": { 16 | "executor": "@nrwl/linter:eslint", 17 | "options": { 18 | "lintFilePatterns": ["libs/lib1/src/**/*.ts", "libs/lib1/src/**/*.html"] 19 | } 20 | } 21 | }, 22 | "tags": [] 23 | } 24 | -------------------------------------------------------------------------------- /libs/lib1/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/lib1.module'; 2 | -------------------------------------------------------------------------------- /libs/lib1/src/lib/header/header.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leosvelperez/angular-tailwind-nx/0e314c97dc8ce424c4763d1911c29f50343b72a1/libs/lib1/src/lib/header/header.component.css -------------------------------------------------------------------------------- /libs/lib1/src/lib/header/header.component.html: -------------------------------------------------------------------------------- 1 |
2 | Angular + Tailwind CSS + Nx 3 |
4 | -------------------------------------------------------------------------------- /libs/lib1/src/lib/header/header.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HeaderComponent } from './header.component'; 4 | 5 | describe('HeaderComponent', () => { 6 | let component: HeaderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ HeaderComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HeaderComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /libs/lib1/src/lib/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'angular-tailwind-nx-header', 5 | templateUrl: './header.component.html', 6 | styleUrls: ['./header.component.css'], 7 | }) 8 | export class HeaderComponent {} 9 | -------------------------------------------------------------------------------- /libs/lib1/src/lib/lib1.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { HeaderComponent } from './header/header.component'; 4 | 5 | @NgModule({ 6 | imports: [CommonModule], 7 | declarations: [ 8 | HeaderComponent 9 | ], 10 | exports: [ 11 | HeaderComponent 12 | ], 13 | }) 14 | export class Lib1Module {} 15 | -------------------------------------------------------------------------------- /libs/lib1/src/test-setup.ts: -------------------------------------------------------------------------------- 1 | import 'jest-preset-angular/setup-jest'; 2 | -------------------------------------------------------------------------------- /libs/lib1/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "files": [], 4 | "include": [], 5 | "references": [ 6 | { 7 | "path": "./tsconfig.lib.json" 8 | }, 9 | { 10 | "path": "./tsconfig.spec.json" 11 | } 12 | ], 13 | "compilerOptions": { 14 | "forceConsistentCasingInFileNames": true, 15 | "strict": true, 16 | "noImplicitOverride": true, 17 | "noPropertyAccessFromIndexSignature": true, 18 | "noImplicitReturns": true, 19 | "noFallthroughCasesInSwitch": true 20 | }, 21 | "angularCompilerOptions": { 22 | "strictInjectionParameters": true, 23 | "strictInputAccessModifiers": true, 24 | "strictTemplates": true 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /libs/lib1/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "declaration": true, 6 | "declarationMap": true, 7 | "inlineSources": true, 8 | "types": [] 9 | }, 10 | "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts"], 11 | "include": ["**/*.ts"] 12 | } 13 | -------------------------------------------------------------------------------- /libs/lib1/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "files": ["src/test-setup.ts"], 9 | "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /libs/lib2/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | -------------------------------------------------------------------------------- /libs/lib2/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts"], 7 | "extends": [ 8 | "plugin:@nrwl/nx/angular", 9 | "plugin:@angular-eslint/template/process-inline-templates" 10 | ], 11 | "rules": { 12 | "@angular-eslint/directive-selector": [ 13 | "error", 14 | { 15 | "type": "attribute", 16 | "prefix": "angularTailwindNx", 17 | "style": "camelCase" 18 | } 19 | ], 20 | "@angular-eslint/component-selector": [ 21 | "error", 22 | { 23 | "type": "element", 24 | "prefix": "angular-tailwind-nx", 25 | "style": "kebab-case" 26 | } 27 | ] 28 | } 29 | }, 30 | { 31 | "files": ["*.html"], 32 | "extends": ["plugin:@nrwl/nx/angular-template"], 33 | "rules": {} 34 | } 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /libs/lib2/README.md: -------------------------------------------------------------------------------- 1 | # lib2 2 | 3 | This library was generated with [Nx](https://nx.dev). 4 | 5 | ## Running unit tests 6 | 7 | Run `nx test lib2` to execute the unit tests. 8 | -------------------------------------------------------------------------------- /libs/lib2/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | displayName: 'lib2', 3 | preset: '../../jest.preset.js', 4 | setupFilesAfterEnv: ['/src/test-setup.ts'], 5 | globals: { 6 | 'ts-jest': { 7 | tsconfig: '/tsconfig.spec.json', 8 | stringifyContentPathRegex: '\\.(html|svg)$', 9 | }, 10 | }, 11 | coverageDirectory: '../../coverage/libs/lib2', 12 | transform: { 13 | '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular', 14 | }, 15 | transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], 16 | snapshotSerializers: [ 17 | 'jest-preset-angular/build/serializers/no-ng-attributes', 18 | 'jest-preset-angular/build/serializers/ng-snapshot', 19 | 'jest-preset-angular/build/serializers/html-comment', 20 | ], 21 | }; 22 | -------------------------------------------------------------------------------- /libs/lib2/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/libs/lib2", 4 | "lib": { 5 | "entryFile": "src/index.ts" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /libs/lib2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@angular-tailwind-nx/lib2", 3 | "version": "0.0.1", 4 | "peerDependencies": { 5 | "@angular/common": "^13.1.0", 6 | "@angular/core": "^13.1.0" 7 | }, 8 | "dependencies": { 9 | "tslib": "^2.3.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /libs/lib2/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "projectType": "library", 3 | "root": "libs/lib2", 4 | "sourceRoot": "libs/lib2/src", 5 | "prefix": "angular-tailwind-nx", 6 | "targets": { 7 | "build": { 8 | "executor": "@nrwl/angular:ng-packagr-lite", 9 | "outputs": ["dist/libs/lib2"], 10 | "options": { 11 | "project": "libs/lib2/ng-package.json", 12 | "tailwindConfig": "libs/lib2/tailwind.config.js" 13 | }, 14 | "configurations": { 15 | "production": { 16 | "tsConfig": "libs/lib2/tsconfig.lib.prod.json" 17 | }, 18 | "development": { 19 | "tsConfig": "libs/lib2/tsconfig.lib.json" 20 | } 21 | }, 22 | "defaultConfiguration": "production" 23 | }, 24 | "test": { 25 | "executor": "@nrwl/jest:jest", 26 | "outputs": ["coverage/libs/lib2"], 27 | "options": { 28 | "jestConfig": "libs/lib2/jest.config.js", 29 | "passWithNoTests": true 30 | } 31 | }, 32 | "lint": { 33 | "executor": "@nrwl/linter:eslint", 34 | "options": { 35 | "lintFilePatterns": ["libs/lib2/src/**/*.ts", "libs/lib2/src/**/*.html"] 36 | } 37 | } 38 | }, 39 | "tags": [] 40 | } 41 | -------------------------------------------------------------------------------- /libs/lib2/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/lib2.module'; 2 | export * from './lib/card/card.component'; 3 | -------------------------------------------------------------------------------- /libs/lib2/src/lib/card/card.component.css: -------------------------------------------------------------------------------- 1 | .card { 2 | @apply h-full flex flex-col p-lg shadow-md hover:shadow-lg; 3 | 4 | background-color: theme('colors.secondary.light'); 5 | } 6 | 7 | .card-title { 8 | @apply text-lg font-bold; 9 | 10 | padding-bottom: theme('spacing.md'); 11 | } 12 | 13 | .card-content { 14 | @apply mb-xl flex-1; 15 | } 16 | -------------------------------------------------------------------------------- /libs/lib2/src/lib/card/card.component.html: -------------------------------------------------------------------------------- 1 |
2 |
{{ title }}
3 |

4 | 5 |

6 | 7 | Show me! 8 | 9 |
10 | -------------------------------------------------------------------------------- /libs/lib2/src/lib/card/card.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CardComponent } from './card.component'; 4 | 5 | describe('CardComponent', () => { 6 | let component: CardComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ CardComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(CardComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /libs/lib2/src/lib/card/card.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'angular-tailwind-nx-card', 5 | templateUrl: './card.component.html', 6 | styleUrls: ['./card.component.css'], 7 | }) 8 | export class CardComponent { 9 | @Input() title?: string; 10 | @Input() url?: string; 11 | } 12 | -------------------------------------------------------------------------------- /libs/lib2/src/lib/lib2.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { CardComponent } from './card/card.component'; 4 | import { Lib3Module } from '@angular-tailwind-nx/lib3'; 5 | 6 | @NgModule({ 7 | imports: [CommonModule, Lib3Module], 8 | declarations: [CardComponent], 9 | exports: [CardComponent], 10 | }) 11 | export class Lib2Module {} 12 | -------------------------------------------------------------------------------- /libs/lib2/src/test-setup.ts: -------------------------------------------------------------------------------- 1 | import 'jest-preset-angular/setup-jest'; 2 | -------------------------------------------------------------------------------- /libs/lib2/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind'); 2 | const { join } = require('path'); 3 | const sharedTailwindConfig = require('../../libs/tailwind-preset/tailwind.config'); 4 | 5 | module.exports = { 6 | presets: [sharedTailwindConfig], 7 | content: [ 8 | join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'), 9 | ...createGlobPatternsForDependencies(__dirname), 10 | ], 11 | }; 12 | -------------------------------------------------------------------------------- /libs/lib2/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "files": [], 4 | "include": [], 5 | "references": [ 6 | { 7 | "path": "./tsconfig.lib.json" 8 | }, 9 | { 10 | "path": "./tsconfig.spec.json" 11 | } 12 | ], 13 | "compilerOptions": { 14 | "forceConsistentCasingInFileNames": true, 15 | "strict": true, 16 | "noImplicitOverride": true, 17 | "noPropertyAccessFromIndexSignature": true, 18 | "noImplicitReturns": true, 19 | "noFallthroughCasesInSwitch": true 20 | }, 21 | "angularCompilerOptions": { 22 | "strictInjectionParameters": true, 23 | "strictInputAccessModifiers": true, 24 | "strictTemplates": true 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /libs/lib2/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "declaration": true, 6 | "declarationMap": true, 7 | "inlineSources": true, 8 | "types": [] 9 | }, 10 | "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts"], 11 | "include": ["**/*.ts"] 12 | } 13 | -------------------------------------------------------------------------------- /libs/lib2/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.lib.json", 3 | "compilerOptions": { 4 | "declarationMap": false 5 | }, 6 | "angularCompilerOptions": {} 7 | } 8 | -------------------------------------------------------------------------------- /libs/lib2/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "files": ["src/test-setup.ts"], 9 | "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /libs/lib3/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | -------------------------------------------------------------------------------- /libs/lib3/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts"], 7 | "extends": [ 8 | "plugin:@nrwl/nx/angular", 9 | "plugin:@angular-eslint/template/process-inline-templates" 10 | ], 11 | "rules": { 12 | "@angular-eslint/directive-selector": [ 13 | "error", 14 | { 15 | "type": "attribute", 16 | "prefix": "angularTailwindNx", 17 | "style": "camelCase" 18 | } 19 | ], 20 | "@angular-eslint/component-selector": [ 21 | "error", 22 | { 23 | "type": "element", 24 | "prefix": "angular-tailwind-nx", 25 | "style": "kebab-case" 26 | } 27 | ] 28 | } 29 | }, 30 | { 31 | "files": ["*.html"], 32 | "extends": ["plugin:@nrwl/nx/angular-template"], 33 | "rules": {} 34 | } 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /libs/lib3/README.md: -------------------------------------------------------------------------------- 1 | # lib3 2 | 3 | This library was generated with [Nx](https://nx.dev). 4 | 5 | ## Running unit tests 6 | 7 | Run `nx test lib3` to execute the unit tests. 8 | -------------------------------------------------------------------------------- /libs/lib3/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | displayName: 'lib3', 3 | preset: '../../jest.preset.js', 4 | setupFilesAfterEnv: ['/src/test-setup.ts'], 5 | globals: { 6 | 'ts-jest': { 7 | tsconfig: '/tsconfig.spec.json', 8 | stringifyContentPathRegex: '\\.(html|svg)$', 9 | }, 10 | }, 11 | coverageDirectory: '../../coverage/libs/lib3', 12 | transform: { 13 | '^.+\\.(ts|mjs|js|html)$': 'jest-preset-angular', 14 | }, 15 | transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], 16 | snapshotSerializers: [ 17 | 'jest-preset-angular/build/serializers/no-ng-attributes', 18 | 'jest-preset-angular/build/serializers/ng-snapshot', 19 | 'jest-preset-angular/build/serializers/html-comment', 20 | ], 21 | }; 22 | -------------------------------------------------------------------------------- /libs/lib3/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/libs/lib3", 4 | "lib": { 5 | "entryFile": "src/index.ts" 6 | }, 7 | "deleteDestPath": false 8 | } 9 | -------------------------------------------------------------------------------- /libs/lib3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@angular-tailwind-nx/lib3", 3 | "version": "0.0.1", 4 | "peerDependencies": { 5 | "@angular/common": "^13.1.0", 6 | "@angular/core": "^13.1.0" 7 | }, 8 | "dependencies": { 9 | "tslib": "^2.3.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /libs/lib3/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "projectType": "library", 3 | "root": "libs/lib3", 4 | "sourceRoot": "libs/lib3/src", 5 | "prefix": "angular-tailwind-nx", 6 | "targets": { 7 | "build-angular": { 8 | "executor": "@nrwl/angular:package", 9 | "outputs": ["dist/libs/lib3"], 10 | "options": { 11 | "project": "libs/lib3/ng-package.json", 12 | "tailwindConfig": "libs/lib3/tailwind.config.js" 13 | }, 14 | "configurations": { 15 | "production": { 16 | "tsConfig": "libs/lib3/tsconfig.lib.prod.json" 17 | }, 18 | "development": { 19 | "tsConfig": "libs/lib3/tsconfig.lib.json" 20 | } 21 | }, 22 | "defaultConfiguration": "production" 23 | }, 24 | "build-themes": { 25 | "executor": "@nrwl/workspace:run-commands", 26 | "outputs": ["dist/libs/lib3/themes"], 27 | "configurations": { 28 | "production": { 29 | "commands": [ 30 | "tailwindcss -c libs/lib3/tailwind.config.js -i ./libs/lib3/src/styles/teal.css -o ./dist/libs/lib3/themes/teal.css -m", 31 | "tailwindcss -c libs/lib3/tailwind.config.js -i ./libs/lib3/src/styles/indigo.css -o ./dist/libs/lib3/themes/indigo.css -m" 32 | ] 33 | }, 34 | "development": { 35 | "commands": [ 36 | "tailwindcss -c libs/lib3/tailwind.config.js -i ./libs/lib3/src/styles/teal.css -o ./dist/libs/lib3/themes/teal.css", 37 | "tailwindcss -c libs/lib3/tailwind.config.js -i ./libs/lib3/src/styles/indigo.css -o ./dist/libs/lib3/themes/indigo.css" 38 | ] 39 | } 40 | }, 41 | "defaultConfiguration": "production" 42 | }, 43 | "build-lib": { 44 | "executor": "@nrwl/workspace:run-commands", 45 | "outputs": ["dist/libs/lib3"], 46 | "configurations": { 47 | "production": { 48 | "commands": [ 49 | "nx run lib3:build-angular:production", 50 | "nx run lib3:build-themes:production" 51 | ] 52 | }, 53 | "development": { 54 | "commands": [ 55 | "nx run lib3:build-angular:development", 56 | "nx run lib3:build-themes:development" 57 | ] 58 | } 59 | }, 60 | "defaultConfiguration": "production" 61 | }, 62 | "build": { 63 | "executor": "@nrwl/workspace:run-commands", 64 | "outputs": ["dist/libs/lib3"], 65 | "configurations": { 66 | "production": { 67 | "commands": [ 68 | "node tools/scripts/remove-dir.js dist/libs/lib3", 69 | "nx run lib3:build-lib:production" 70 | ], 71 | "parallel": false 72 | }, 73 | "development": { 74 | "commands": [ 75 | "node tools/scripts/remove-dir.js dist/libs/lib3", 76 | "nx run lib3:build-lib:development" 77 | ], 78 | "parallel": false 79 | } 80 | }, 81 | "defaultConfiguration": "production" 82 | }, 83 | "test": { 84 | "executor": "@nrwl/jest:jest", 85 | "outputs": ["coverage/libs/lib3"], 86 | "options": { 87 | "jestConfig": "libs/lib3/jest.config.js", 88 | "passWithNoTests": true 89 | } 90 | }, 91 | "lint": { 92 | "executor": "@nrwl/linter:eslint", 93 | "options": { 94 | "lintFilePatterns": ["libs/lib3/src/**/*.ts", "libs/lib3/src/**/*.html"] 95 | } 96 | } 97 | }, 98 | "tags": [] 99 | } 100 | -------------------------------------------------------------------------------- /libs/lib3/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/lib3.module'; 2 | export * from './lib/button/button.component'; 3 | -------------------------------------------------------------------------------- /libs/lib3/src/lib/button/button.component.css: -------------------------------------------------------------------------------- 1 | .atn-button { 2 | @apply py-sm px-md bg-primary-dark hover:bg-primary text-white; 3 | } 4 | -------------------------------------------------------------------------------- /libs/lib3/src/lib/button/button.component.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /libs/lib3/src/lib/button/button.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ButtonComponent } from './button.component'; 4 | 5 | describe('ButtonComponent', () => { 6 | let component: ButtonComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ ButtonComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ButtonComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /libs/lib3/src/lib/button/button.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, ViewEncapsulation } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'angular-tailwind-nx-button', 5 | templateUrl: './button.component.html', 6 | styleUrls: ['./button.component.css'], 7 | encapsulation: ViewEncapsulation.None, 8 | }) 9 | export class ButtonComponent { 10 | @Input() href?: string; 11 | } 12 | -------------------------------------------------------------------------------- /libs/lib3/src/lib/lib3.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { ButtonComponent } from './button/button.component'; 4 | 5 | @NgModule({ 6 | imports: [CommonModule], 7 | declarations: [ 8 | ButtonComponent 9 | ], 10 | exports: [ 11 | ButtonComponent 12 | ], 13 | }) 14 | export class Lib3Module {} 15 | -------------------------------------------------------------------------------- /libs/lib3/src/styles/indigo.css: -------------------------------------------------------------------------------- 1 | @tailwind components; 2 | @tailwind utilities; 3 | 4 | :root { 5 | /* Colors */ 6 | --primary-light: #a5b4fc; 7 | --primary: #6366f1; 8 | --primary-dark: #4338ca; 9 | --secondary-light: #e9d5ff; 10 | --secondary: #a855f7; 11 | --secondary-dark: #7e22ce; 12 | --white: #ffffff; 13 | --black: #000000; 14 | 15 | /* Spacing */ 16 | --spacing-sm: 0.5rem; 17 | --spacing-md: 1rem; 18 | --spacing-lg: 1.5rem; 19 | --spacing-xl: 2rem; 20 | } 21 | -------------------------------------------------------------------------------- /libs/lib3/src/styles/teal.css: -------------------------------------------------------------------------------- 1 | @tailwind components; 2 | @tailwind utilities; 3 | 4 | :root { 5 | /* Colors */ 6 | --primary-light: #5eead4; 7 | --primary: #14b8a6; 8 | --primary-dark: #0f766e; 9 | --secondary-light: #bae6fd; 10 | --secondary: #0ea5e9; 11 | --secondary-dark: #0369a1; 12 | --white: #ffffff; 13 | --black: #000000; 14 | 15 | /* Spacing */ 16 | --spacing-sm: 0.5rem; 17 | --spacing-md: 1rem; 18 | --spacing-lg: 1.5rem; 19 | --spacing-xl: 2rem; 20 | } 21 | -------------------------------------------------------------------------------- /libs/lib3/src/test-setup.ts: -------------------------------------------------------------------------------- 1 | import 'jest-preset-angular/setup-jest'; 2 | -------------------------------------------------------------------------------- /libs/lib3/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind'); 2 | const { join } = require('path'); 3 | const sharedTailwindConfig = require('../../libs/tailwind-preset/tailwind.config'); 4 | 5 | module.exports = { 6 | presets: [sharedTailwindConfig], 7 | content: [ 8 | join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'), 9 | ...createGlobPatternsForDependencies(__dirname), 10 | ], 11 | }; 12 | -------------------------------------------------------------------------------- /libs/lib3/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "files": [], 4 | "include": [], 5 | "references": [ 6 | { 7 | "path": "./tsconfig.lib.json" 8 | }, 9 | { 10 | "path": "./tsconfig.lib.prod.json" 11 | }, 12 | { 13 | "path": "./tsconfig.spec.json" 14 | } 15 | ], 16 | "compilerOptions": { 17 | "forceConsistentCasingInFileNames": true, 18 | "strict": true, 19 | "noImplicitOverride": true, 20 | "noPropertyAccessFromIndexSignature": true, 21 | "noImplicitReturns": true, 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "angularCompilerOptions": { 25 | "strictInjectionParameters": true, 26 | "strictInputAccessModifiers": true, 27 | "strictTemplates": true 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /libs/lib3/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "declaration": true, 6 | "declarationMap": true, 7 | "inlineSources": true, 8 | "types": [] 9 | }, 10 | "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts"], 11 | "include": ["**/*.ts"] 12 | } 13 | -------------------------------------------------------------------------------- /libs/lib3/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.lib.json", 3 | "compilerOptions": { 4 | "declarationMap": false 5 | }, 6 | "angularCompilerOptions": { 7 | "compilationMode": "partial" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /libs/lib3/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "files": ["src/test-setup.ts"], 9 | "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /libs/tailwind-preset/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "projectType": "library", 3 | "root": "libs/tailwind-preset", 4 | "sourceRoot": "libs/tailwind-preset", 5 | "targets": {}, 6 | "tags": [] 7 | } 8 | -------------------------------------------------------------------------------- /libs/tailwind-preset/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | theme: { 3 | colors: { 4 | primary: { 5 | light: 'var(--primary-light)', 6 | DEFAULT: 'var(--primary)', 7 | dark: 'var(--primary-dark)', 8 | }, 9 | secondary: { 10 | light: 'var(--secondary-light)', 11 | DEFAULT: 'var(--secondary)', 12 | dark: 'var(--secondary-dark)', 13 | }, 14 | white: 'var(--white)', 15 | black: 'var(--black)', 16 | }, 17 | spacing: { 18 | sm: 'var(--spacing-sm)', 19 | md: 'var(--spacing-md)', 20 | lg: 'var(--spacing-lg)', 21 | xl: 'var(--spacing-xl)', 22 | }, 23 | }, 24 | plugins: [], 25 | }; 26 | -------------------------------------------------------------------------------- /nx.json: -------------------------------------------------------------------------------- 1 | { 2 | "npmScope": "angular-tailwind-nx", 3 | "affected": { 4 | "defaultBase": "main" 5 | }, 6 | "cli": { 7 | "defaultCollection": "@nrwl/angular", 8 | "packageManager": "yarn" 9 | }, 10 | "implicitDependencies": { 11 | "package.json": { 12 | "dependencies": "*", 13 | "devDependencies": "*" 14 | }, 15 | ".eslintrc.json": "*" 16 | }, 17 | "tasksRunnerOptions": { 18 | "default": { 19 | "runner": "@nrwl/workspace/tasks-runners/default", 20 | "options": { 21 | "cacheableOperations": ["build", "lint", "test", "e2e"] 22 | } 23 | } 24 | }, 25 | "targetDependencies": { 26 | "build": [ 27 | { 28 | "target": "build", 29 | "projects": "dependencies" 30 | } 31 | ] 32 | }, 33 | "generators": { 34 | "@nrwl/angular:application": { 35 | "style": "css", 36 | "linter": "eslint", 37 | "unitTestRunner": "jest", 38 | "e2eTestRunner": "cypress" 39 | }, 40 | "@nrwl/angular:library": { 41 | "linter": "eslint", 42 | "unitTestRunner": "jest" 43 | }, 44 | "@nrwl/angular:component": { 45 | "style": "css" 46 | } 47 | }, 48 | "defaultProject": "app1" 49 | } 50 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-tailwind-nx", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "ng": "nx", 7 | "postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main", 8 | "start": "nx serve", 9 | "build": "nx build", 10 | "test": "nx test" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "13.2.6", 15 | "@angular/common": "13.2.6", 16 | "@angular/compiler": "13.2.6", 17 | "@angular/core": "13.2.6", 18 | "@angular/forms": "13.2.6", 19 | "@angular/platform-browser": "13.2.6", 20 | "@angular/platform-browser-dynamic": "13.2.6", 21 | "@angular/router": "13.2.6", 22 | "@nrwl/angular": "13.8.7", 23 | "rxjs": "~7.4.0", 24 | "tslib": "^2.0.0", 25 | "zone.js": "~0.11.4" 26 | }, 27 | "devDependencies": { 28 | "@angular-devkit/build-angular": "13.2.6", 29 | "@angular-eslint/eslint-plugin": "~13.0.1", 30 | "@angular-eslint/eslint-plugin-template": "~13.0.1", 31 | "@angular-eslint/template-parser": "~13.0.1", 32 | "@angular/cli": "13.2.6", 33 | "@angular/compiler-cli": "13.2.6", 34 | "@angular/language-service": "13.2.6", 35 | "@nrwl/cli": "13.8.7", 36 | "@nrwl/cypress": "13.8.7", 37 | "@nrwl/eslint-plugin-nx": "13.8.7", 38 | "@nrwl/jest": "13.8.7", 39 | "@nrwl/linter": "13.8.7", 40 | "@nrwl/tao": "13.8.7", 41 | "@nrwl/web": "13.8.7", 42 | "@nrwl/workspace": "13.8.7", 43 | "@types/jest": "27.0.2", 44 | "@types/node": "16.11.7", 45 | "@typescript-eslint/eslint-plugin": "5.10.2", 46 | "@typescript-eslint/parser": "5.10.2", 47 | "autoprefixer": "^10.4.0", 48 | "cypress": "^9.1.0", 49 | "eslint": "8.7.0", 50 | "eslint-config-prettier": "8.1.0", 51 | "eslint-plugin-cypress": "^2.10.3", 52 | "jest": "27.2.3", 53 | "jest-preset-angular": "11.1.1", 54 | "ng-packagr": "13.2.1", 55 | "postcss": "^8.4.5", 56 | "postcss-import": "^14.0.2", 57 | "postcss-preset-env": "^6.7.0", 58 | "postcss-url": "^10.1.1", 59 | "prettier": "^2.5.1", 60 | "tailwindcss": "^3.0.2", 61 | "ts-jest": "27.0.5", 62 | "typescript": "4.5.5" 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /tools/generators/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/leosvelperez/angular-tailwind-nx/0e314c97dc8ce424c4763d1911c29f50343b72a1/tools/generators/.gitkeep -------------------------------------------------------------------------------- /tools/scripts/remove-dir.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | 3 | const args = process.argv.slice(2); 4 | 5 | if (!args.length) { 6 | throw new Error('No path specified. Please specify a path to remove.'); 7 | } else if (args.length > 1) { 8 | throw new Error( 9 | 'Too many arguments. Please specify only one path to remove.' 10 | ); 11 | } 12 | 13 | fs.rmSync(args[0], { recursive: true, force: true }); 14 | -------------------------------------------------------------------------------- /tools/tsconfig.tools.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "../dist/out-tsc/tools", 5 | "rootDir": ".", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": ["node"], 9 | "importHelpers": false 10 | }, 11 | "include": ["**/*.ts"] 12 | } 13 | -------------------------------------------------------------------------------- /tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "rootDir": ".", 5 | "sourceMap": true, 6 | "declaration": false, 7 | "moduleResolution": "node", 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "importHelpers": true, 11 | "target": "es2015", 12 | "module": "esnext", 13 | "lib": ["es2017", "dom"], 14 | "skipLibCheck": true, 15 | "skipDefaultLibCheck": true, 16 | "baseUrl": ".", 17 | "paths": { 18 | "@angular-tailwind-nx/lib1": ["libs/lib1/src/index.ts"], 19 | "@angular-tailwind-nx/lib2": ["libs/lib2/src/index.ts"], 20 | "@angular-tailwind-nx/lib3": ["libs/lib3/src/index.ts"] 21 | } 22 | }, 23 | "exclude": ["node_modules", "tmp"] 24 | } 25 | --------------------------------------------------------------------------------