Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tailwind CSS support in Angular 10, with Angular Material
Index: client/angular.json
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- client/angular.json (revision fcfaf7440d0eaed6baa841b2b4d9eca231b002f6)
+++ client/angular.json (date 1603593891228)
@@ -39,7 +39,7 @@
"prefix": "app",
"architect": {
"build": {
- "builder": "@angular-devkit/build-angular:browser",
+ "builder": "@angular-builders/custom-webpack:browser",
"options": {
"outputPath": "dist/client",
"index": "projects/client/src/index.html",
@@ -52,9 +52,13 @@
"projects/client/src/assets"
],
"styles": [
- "projects/client/src/styles.scss"
+ "projects/client/src/styles.scss",
+ "projects/client/src/tailwind.scss"
],
- "scripts": []
+ "scripts": [],
+ "customWebpackConfig": {
+ "path": "./webpack.config.js"
+ }
},
"configurations": {
"production": {
@@ -88,9 +92,12 @@
}
},
"serve": {
- "builder": "@angular-devkit/build-angular:dev-server",
+ "builder": "@angular-builders/custom-webpack:dev-server",
"options": {
- "browserTarget": "client:build"
+ "browserTarget": "client:build",
+ "customWebpackConfig": {
+ "path": "./webpack.config.js"
+ }
},
"configurations": {
"production": {
@@ -111,7 +118,8 @@
"polyfills": "projects/client/src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"styles": [
- "projects/client/src/styles.scss"
+ "projects/client/src/styles.scss",
+ "projects/client/src/tailwind.scss"
],
"scripts": [],
"assets": [
Index: client/webpack.config.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- client/webpack.config.js (date 1603593951904)
+++ client/webpack.config.js (date 1603593951904)
@@ -0,0 +1,21 @@
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /tailwind\.scss$/,
+ loader: "postcss-loader",
+ options: {
+ postcssOptions: {
+ ident: "postcss",
+ syntax: "postcss-scss",
+ plugins: [
+ require("postcss-import"),
+ require("tailwindcss"),
+ require("autoprefixer"),
+ ]
+ }
+ },
+ },
+ ],
+ },
+};
Index: client/projects/client/src/tailwind.scss
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- client/projects/client/src/tailwind.scss (date 1603593927700)
+++ client/projects/client/src/tailwind.scss (date 1603593927700)
@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
Index: client/tailwind.config.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- client/tailwind.config.js (date 1603592726965)
+++ client/tailwind.config.js (date 1603592726965)
@@ -0,0 +1,15 @@
+module.exports = {
+ future: {
+ // removeDeprecatedGapUtilities: true,
+ // purgeLayersByDefault: true,
+ },
+ purge: [
+ './src/**/*.html',
+ './src/**/*.ts',
+ ],
+ theme: {
+ extend: {},
+ },
+ variants: {},
+ plugins: [],
+}
Index: client/package.json
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- client/package.json (revision fcfaf7440d0eaed6baa841b2b4d9eca231b002f6)
+++ client/package.json (date 1603593311034)
@@ -30,6 +30,7 @@
"zone.js": "~0.10.2"
},
"devDependencies": {
+ "@angular-builders/custom-webpack": "^10.0.1",
"@angular-builders/jest": "^10.0.1",
"@angular-devkit/build-angular": "~0.1001.7",
"@angular/cli": "~10.1.0",
@@ -38,6 +39,11 @@
"@types/jest": "^26.0.14",
"@types/node": "^12.11.1",
"jest": "^26.5.3",
+ "postcss": "^8.1.4",
+ "postcss-import": "^13.0.0",
+ "postcss-loader": "^4.0.4",
+ "postcss-scss": "^3.0.2",
+ "tailwindcss": "^1.9.5",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"tslint-config-standard": "^9.0.0",
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment