Add tailwind support

src/generators/SampleAssetsGenerator.ts

@@ -13,6 +13,7 @@ import { SampleDefinitionFile } from "./misc/SampleDefinitionFile";
 const APP_MODULE_TEMPLATE_PATH = path.join(__dirname, "../templates/app.module.ts.template");
 const APP_CONFIG_TEMPLATE_PATH = path.join(__dirname, "../templates/app.config.ts.template");
 const APP_COMPONENT_TEMPLATE_PATH = path.join(__dirname, "../templates/app.component.ts.template");
+const POSTCSSRC_FILE_PATH = path.join(__dirname, "../templates/postcssrc.json.template");
 
 const COMPONENT_STYLE_FILE_EXTENSION = "scss";
 const ROOT_MODULE_PATHS = ["grid-crm/grid-crm"];
@@ -29,7 +30,9 @@ const WEB_CONTAINER_DEPS = [
     '@juggle/resize-observer',
     '@microsoft/signalr',
     'igniteui-dockmanager',
-    'igniteui-webcomponents'
+    'igniteui-webcomponents',
+    'tailwindcss',
+    '@tailwindcss/postcss',
 ];
 
 export class SampleAssetsGenerator {
@@ -239,12 +242,17 @@ export class SampleAssetsGenerator {
     private _getAdditionalFiles(config: Config): LiveEditingFile[] {
         let additionalFiles = new Array<LiveEditingFile>();
         for (let i = 0; i < config.additionalFiles.length; i++) {
-            let fileContent = fs.readFileSync(path.join(process.cwd(), config.additionalFiles[i]), "utf8");
-            config.additionalFiles[i] = config.additionalFiles[i].substring(
-                config.additionalFiles[i].indexOf(SAMPLE_SRC_FOLDER));
-            let file = new LiveEditingFile(config.additionalFiles[i], fileContent);
-            this._shortenComponentPath(config, file);
-            additionalFiles.push(file);
+            if (config.additionalFiles[i] === ".postcssrc.json") {
+                let postCssRcFile = fs.readFileSync(POSTCSSRC_FILE_PATH, "utf8");
+                additionalFiles.push(new LiveEditingFile(".postcssrc.json", postCssRcFile));
+            } else {
+                let fileContent = fs.readFileSync(path.join(process.cwd(), config.additionalFiles[i]), "utf8");
+                config.additionalFiles[i] = config.additionalFiles[i].substring(
+                    config.additionalFiles[i].indexOf(SAMPLE_SRC_FOLDER));
+                let file = new LiveEditingFile(config.additionalFiles[i], fileContent);
+                this._shortenComponentPath(config, file);
+                additionalFiles.push(file);
+            }
         }
 
         return additionalFiles;

src/templates/package.json.template

@@ -38,6 +38,7 @@
     "intl": "^1.2.5",
     "rxjs": "^7.8.2",
     "tailwindcss": "^4.1.10",
+    "@tailwindcss/postcss": "^4.1.10",
     "tslib": "^2.6.1",
     "zone.js": "~0.15.0"{dependencies}
   },

src/templates/postcssrc.json.template

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}

src/templates/tasks.json.template

@@ -8,9 +8,9 @@
   ],
     // These tasks can be run from CodeSandbox. Running one will open a log in the app.
     "tasks": {
-        "node node_modules/@angular/cli/bin/ng serve": {
+        "node node_modules/@angular/cli/bin/ng serve -o --disable-host-check": {
             "name": "Start Project",
-            "command": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng serve",
+            "command": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng serve -o --disable-host-check",
             "runAtStart": true
         }
     }