├── .browserslistrc ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── documentation ├── components │ └── AppComponent.html ├── coverage.html ├── dependencies.html ├── fonts │ ├── ionicons.eot │ ├── ionicons.svg │ ├── ionicons.ttf │ ├── ionicons.woff │ ├── ionicons.woff2 │ ├── roboto-v15-latin-300.eot │ ├── roboto-v15-latin-300.svg │ ├── roboto-v15-latin-300.ttf │ ├── roboto-v15-latin-300.woff │ ├── roboto-v15-latin-300.woff2 │ ├── roboto-v15-latin-700.eot │ ├── roboto-v15-latin-700.svg │ ├── roboto-v15-latin-700.ttf │ ├── roboto-v15-latin-700.woff │ ├── roboto-v15-latin-700.woff2 │ ├── roboto-v15-latin-italic.eot │ ├── roboto-v15-latin-italic.svg │ ├── roboto-v15-latin-italic.ttf │ ├── roboto-v15-latin-italic.woff │ ├── roboto-v15-latin-italic.woff2 │ ├── roboto-v15-latin-regular.eot │ ├── roboto-v15-latin-regular.svg │ ├── roboto-v15-latin-regular.ttf │ ├── roboto-v15-latin-regular.woff │ └── roboto-v15-latin-regular.woff2 ├── graph │ └── dependencies.svg ├── images │ ├── compodoc-vectorise-inverted.png │ ├── compodoc-vectorise-inverted.svg │ ├── compodoc-vectorise.png │ ├── compodoc-vectorise.svg │ ├── coverage-badge-documentation.svg │ └── favicon.ico ├── index.html ├── js │ ├── compodoc.js │ ├── lazy-load-graphs.js │ ├── libs │ │ ├── EventDispatcher.js │ │ ├── bootstrap-native.js │ │ ├── clipboard.min.js │ │ ├── custom-elements-es5-adapter.js │ │ ├── custom-elements.min.js │ │ ├── d3.v3.min.js │ │ ├── deep-iterator.js │ │ ├── es6-shim.min.js │ │ ├── htmlparser.js │ │ ├── innersvg.js │ │ ├── lit-html.js │ │ ├── prism.js │ │ ├── promise.min.js │ │ ├── svg-pan-zoom.min.js │ │ ├── tablesort.min.js │ │ ├── tablesort.number.min.js │ │ ├── vis.min.js │ │ └── zepto.min.js │ ├── menu-wc.js │ ├── menu-wc_es5.js │ ├── menu.js │ ├── routes.js │ ├── routes │ │ └── routes_index.js │ ├── search │ │ ├── lunr.min.js │ │ ├── search-lunr.js │ │ ├── search.js │ │ └── search_index.js │ ├── sourceCode.js │ ├── svg-pan-zoom.controls.js │ ├── tabs.js │ └── tree.js ├── miscellaneous │ └── variables.html ├── modules.html ├── modules │ ├── AppModule.html │ ├── AppModule │ │ └── dependencies.svg │ ├── AppRoutingModule.html │ └── MaterialModule.html ├── overview.html ├── routes.html └── styles │ ├── bootstrap-card.css │ ├── bootstrap.min.css │ ├── compodoc.css │ ├── dark.css │ ├── ionicons.min.css │ ├── laravel.css │ ├── material.css │ ├── original.css │ ├── postmark.css │ ├── prism.css │ ├── readthedocs.css │ ├── reset.css │ ├── stripe.css │ ├── style.css │ ├── tablesort.css │ └── vagrant.css ├── karma.conf.js ├── package-lock.json ├── package.json ├── src ├── app │ ├── app-routing.module.ts │ ├── app.component.html │ ├── app.component.scss │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ └── material │ │ └── material.module.ts ├── assets │ └── .gitkeep ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.scss └── test.ts ├── tailwind.config.js ├── tsconfig.app.json ├── tsconfig.doc.json ├── tsconfig.json └── tsconfig.spec.json /.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 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 18 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://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 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.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 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | 16 | # IDEs and editors 17 | /.idea 18 | .project 19 | .classpath 20 | .c9/ 21 | *.launch 22 | .settings/ 23 | *.sublime-workspace 24 | 25 | # IDE - VSCode 26 | .vscode/* 27 | !.vscode/settings.json 28 | !.vscode/tasks.json 29 | !.vscode/launch.json 30 | !.vscode/extensions.json 31 | .history/* 32 | 33 | # misc 34 | /.sass-cache 35 | /connect.lock 36 | /coverage 37 | /libpeerconnection.log 38 | npm-debug.log 39 | yarn-error.log 40 | testem.log 41 | /typings 42 | 43 | # System Files 44 | .DS_Store 45 | Thumbs.db 46 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angular-material-tailwind 2 | 3 | ## Features 4 | 5 | + [Angular Material](https://material.angular.io) set up and ready to use in templates. 6 | + [Tailwind CSS](https://tailwindcss.com/) 2.0 with JIT enabled 7 | + Documentation generator [Compodoc](https://compodoc.app) pre-configured 8 | 9 | ## Development server 10 | 11 | Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 12 | 13 | ## Generating Documentation 14 | Run `npm run compodoc` in the root directory. It'll generate the documentation in project-name/documentation directory and will serve the documentation at **port 8080** in watch mode. 15 | 16 | ## Tailwind Intellisense not working 17 | Open extension settings and add a new field in **Include Languages** with Item="plaintext" and Value="ts" 18 | 19 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.1.3. 20 | 21 | --- 22 | 23 | ## Code scaffolding 24 | 25 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 26 | 27 | ## Build 28 | 29 | Run `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory. 30 | 31 | ## Running unit tests 32 | 33 | Run `npm run test` to execute the unit tests via [Karma](https://karma-runner.github.io). 34 | 35 | ## Running end-to-end tests 36 | 37 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 38 | 39 | ## Further help 40 | 41 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 42 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "tw-test": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "style": "scss" 11 | }, 12 | "@schematics/angular:application": { 13 | "strict": true 14 | } 15 | }, 16 | "root": "", 17 | "sourceRoot": "src", 18 | "prefix": "app", 19 | "architect": { 20 | "build": { 21 | "builder": "@angular-devkit/build-angular:browser", 22 | "options": { 23 | "outputPath": "dist/tw-test", 24 | "index": "src/index.html", 25 | "main": "src/main.ts", 26 | "polyfills": "src/polyfills.ts", 27 | "tsConfig": "tsconfig.app.json", 28 | "inlineStyleLanguage": "scss", 29 | "assets": [ 30 | "src/favicon.ico", 31 | "src/assets" 32 | ], 33 | "styles": [ 34 | "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", 35 | "src/styles.scss" 36 | ], 37 | "scripts": [] 38 | }, 39 | "configurations": { 40 | "production": { 41 | "budgets": [ 42 | { 43 | "type": "initial", 44 | "maximumWarning": "500kb", 45 | "maximumError": "1mb" 46 | }, 47 | { 48 | "type": "anyComponentStyle", 49 | "maximumWarning": "2kb", 50 | "maximumError": "4kb" 51 | } 52 | ], 53 | "fileReplacements": [ 54 | { 55 | "replace": "src/environments/environment.ts", 56 | "with": "src/environments/environment.prod.ts" 57 | } 58 | ], 59 | "outputHashing": "all" 60 | }, 61 | "development": { 62 | "buildOptimizer": false, 63 | "optimization": false, 64 | "vendorChunk": true, 65 | "extractLicenses": false, 66 | "sourceMap": true, 67 | "namedChunks": true 68 | } 69 | }, 70 | "defaultConfiguration": "production" 71 | }, 72 | "serve": { 73 | "builder": "@angular-devkit/build-angular:dev-server", 74 | "configurations": { 75 | "production": { 76 | "browserTarget": "tw-test:build:production" 77 | }, 78 | "development": { 79 | "browserTarget": "tw-test:build:development" 80 | } 81 | }, 82 | "defaultConfiguration": "development" 83 | }, 84 | "extract-i18n": { 85 | "builder": "@angular-devkit/build-angular:extract-i18n", 86 | "options": { 87 | "browserTarget": "tw-test:build" 88 | } 89 | }, 90 | "test": { 91 | "builder": "@angular-devkit/build-angular:karma", 92 | "options": { 93 | "main": "src/test.ts", 94 | "polyfills": "src/polyfills.ts", 95 | "tsConfig": "tsconfig.spec.json", 96 | "karmaConfig": "karma.conf.js", 97 | "inlineStyleLanguage": "scss", 98 | "assets": [ 99 | "src/favicon.ico", 100 | "src/assets" 101 | ], 102 | "styles": [ 103 | "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", 104 | "src/styles.scss" 105 | ], 106 | "scripts": [] 107 | } 108 | } 109 | } 110 | } 111 | }, 112 | "defaultProject": "tw-test" 113 | } 114 | -------------------------------------------------------------------------------- /documentation/coverage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 |File | 62 |Type | 63 |Identifier | 64 |Statements | 65 |
---|---|---|---|
70 | 71 | src/app/app.component.ts 72 | | 73 |component | 74 |AppComponent | 75 |76 | 0 % 77 | (0/2) 78 | | 79 |
82 | 83 | src/environments/environment.prod.ts 84 | | 85 |variable | 86 |environment | 87 |88 | 0 % 89 | (0/1) 90 | | 91 |
94 | 95 | src/environments/environment.ts 96 | | 97 |variable | 98 |environment | 99 |100 | 0 % 101 | (0/1) 102 | | 103 |
106 | 107 | src/test.ts 108 | | 109 |variable | 110 |context | 111 |112 | 0 % 113 | (0/1) 114 | | 115 |
118 | 119 | src/test.ts 120 | | 121 |variable | 122 |require | 123 |124 | 0 % 125 | (0/1) 126 | | 127 |
This project was generated with Angular CLI version 12.1.3.
36 |Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.
60 |
|
75 |
86 | 87 | 88 | context 89 | 90 | 91 | | 92 |
95 | Default value : require.context('./', true, /\.spec\.ts$/)
96 | |
97 |
106 | 107 | 108 | require 109 | 110 | 111 | | 112 |
115 | Type : literal type
116 |
117 | |
118 |
130 | 131 | 132 | environment 133 | 134 | 135 | | 136 |
139 | Type : object
140 |
141 | |
142 |
145 | Default value : {
146 | production: true
147 | }
148 | |
149 |
161 | 162 | 163 | environment 164 | 165 | 166 | | 167 |
170 | Type : object
171 |
172 | |
173 |
176 | Default value : {
177 | production: false
178 | }
179 | |
180 |
48 | 51 |
52 | 55 |65 | No graph available. 66 |
67 | 70 |80 | No graph available. 81 |
82 | 85 |55 |
58 | src/app/app-routing.module.ts
59 |
import { NgModule } from '@angular/core';
76 | import { RouterModule, Routes } from '@angular/router';
77 |
78 | const routes: Routes = [];
79 |
80 | @NgModule({
81 | imports: [RouterModule.forRoot(routes)],
82 | exports: [RouterModule]
83 | })
84 | export class AppRoutingModule { }
85 |
86 | 55 |
58 | src/app/material/material.module.ts
59 |
import { NgModule } from '@angular/core';
76 | import { A11yModule } from '@angular/cdk/a11y';
77 | import { ClipboardModule } from '@angular/cdk/clipboard';
78 | import { DragDropModule } from '@angular/cdk/drag-drop';
79 | import { PortalModule } from '@angular/cdk/portal';
80 | import { ScrollingModule } from '@angular/cdk/scrolling';
81 | import { CdkStepperModule } from '@angular/cdk/stepper';
82 | import { CdkTableModule } from '@angular/cdk/table';
83 | import { CdkTreeModule } from '@angular/cdk/tree';
84 | import { MatAutocompleteModule } from '@angular/material/autocomplete';
85 | import { MatBadgeModule } from '@angular/material/badge';
86 | import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
87 | import { MatButtonModule } from '@angular/material/button';
88 | import { MatButtonToggleModule } from '@angular/material/button-toggle';
89 | import { MatCardModule } from '@angular/material/card';
90 | import { MatCheckboxModule } from '@angular/material/checkbox';
91 | import { MatChipsModule } from '@angular/material/chips';
92 | import { MatStepperModule } from '@angular/material/stepper';
93 | import { MatDatepickerModule } from '@angular/material/datepicker';
94 | import { MatDialogModule } from '@angular/material/dialog';
95 | import { MatDividerModule } from '@angular/material/divider';
96 | import { MatExpansionModule } from '@angular/material/expansion';
97 | import { MatGridListModule } from '@angular/material/grid-list';
98 | import { MatIconModule } from '@angular/material/icon';
99 | import { MatInputModule } from '@angular/material/input';
100 | import { MatListModule } from '@angular/material/list';
101 | import { MatMenuModule } from '@angular/material/menu';
102 | import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
103 | import { MatPaginatorModule } from '@angular/material/paginator';
104 | import { MatProgressBarModule } from '@angular/material/progress-bar';
105 | import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
106 | import { MatRadioModule } from '@angular/material/radio';
107 | import { MatSelectModule } from '@angular/material/select';
108 | import { MatSidenavModule } from '@angular/material/sidenav';
109 | import { MatSliderModule } from '@angular/material/slider';
110 | import { MatSlideToggleModule } from '@angular/material/slide-toggle';
111 | import { MatSnackBarModule } from '@angular/material/snack-bar';
112 | import { MatSortModule } from '@angular/material/sort';
113 | import { MatTableModule } from '@angular/material/table';
114 | import { MatTabsModule } from '@angular/material/tabs';
115 | import { MatToolbarModule } from '@angular/material/toolbar';
116 | import { MatTooltipModule } from '@angular/material/tooltip';
117 | import { MatTreeModule } from '@angular/material/tree';
118 |
119 | @NgModule({
120 | exports: [
121 | A11yModule,
122 | ClipboardModule,
123 | CdkStepperModule,
124 | CdkTableModule,
125 | CdkTreeModule,
126 | DragDropModule,
127 | MatAutocompleteModule,
128 | MatBadgeModule,
129 | MatBottomSheetModule,
130 | MatButtonModule,
131 | MatButtonToggleModule,
132 | MatCardModule,
133 | MatCheckboxModule,
134 | MatChipsModule,
135 | MatStepperModule,
136 | MatDatepickerModule,
137 | MatDialogModule,
138 | MatDividerModule,
139 | MatExpansionModule,
140 | MatGridListModule,
141 | MatIconModule,
142 | MatInputModule,
143 | MatListModule,
144 | MatMenuModule,
145 | MatNativeDateModule,
146 | MatPaginatorModule,
147 | MatProgressBarModule,
148 | MatProgressSpinnerModule,
149 | MatRadioModule,
150 | MatRippleModule,
151 | MatSelectModule,
152 | MatSidenavModule,
153 | MatSliderModule,
154 | MatSlideToggleModule,
155 | MatSnackBarModule,
156 | MatSortModule,
157 | MatTableModule,
158 | MatTabsModule,
159 | MatToolbarModule,
160 | MatTooltipModule,
161 | MatTreeModule,
162 | PortalModule,
163 | ScrollingModule,
164 | ]
165 | })
166 | export class MaterialModule { }
167 |
168 | Hello
3 |Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga labore maiores 4 | assumenda, qui minima, 5 | amet aperiam distinctio a accusantium repellendus vel! Voluptatum officia quo exercitationem quia eum ex vel 6 | cupiditate.
7 | 8 |