example: add tailwindcss without postcss config

nvh95 · Aug 22, 2022 · d65fc88 · d65fc88
1 parent 5a65066
commit d65fc88
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 0 deletions.
diff --git a/examples/angular/package.json b/examples/angular/package.json
@@ -37,9 +37,12 @@
     "@types/jest": "^28.1.6",
     "@types/node": "16.11.7",
     "@types/testing-library__jest-dom": "^5.14.5",
+    "autoprefixer": "^10.4.8",
     "jest": "^28.1.3",
     "jest-preview": "^0.2.8",
+    "postcss": "^8.4.16",
     "start-server-and-test": "^1.14.0",
+    "tailwindcss": "^3.1.8",
     "typescript": "~4.7.2"
   }
 }
diff --git a/examples/angular/src/app/app.component.ts b/examples/angular/src/app/app.component.ts
@@ -29,6 +29,7 @@ export const styleUrls = [
           This text is styled by global configured SASS
         </p>
         <p class="imported-sass">This text is styled by imported SASS</p>
+        <p class="text-xanh">TailwindCSS Green</p>
         <p>
           <app-counter></app-counter>
         </p>

diff --git a/examples/angular/src/styles/index.css b/examples/angular/src/styles/index.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

diff --git a/examples/angular/tailwind.config.js b/examples/angular/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{html,ts}'],
+  theme: {
+    extend: {},
+    colors: {
+      xanh: '#34eb4f',
+    },
+  },
+  plugins: [],
+};