convert to css and add tailwind

Author: jmclellan-crexi

.lintstagedrc.json

@@ -1,5 +1,5 @@
 {
   "*.ts": ["prettier --write", "eslint"],
   "*.html": ["eslint", "prettier --write"],
-  "*.scss": "prettier --write"
+  "*.css": "prettier --write"
 }

.postcssrc.json

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

README.md

@@ -8,6 +8,8 @@ The goal of this assignment is to showcase your skills and coding style while bu
 > **State Management** - We have included all of the `@ngrx` packages but you're welcome to use any state management library you see fit or just stateful services.
 > 
 > **Component Library** - We have included [@angular/material](https://material.angular.io/components/categories) but you're welcome to use any component library that suites your needs. Ex: [PrimeNG](https://primeng.org/installation)
+> 
+> **Styling** - We have included [tailwindcss](https://tailwindcss.com/docs/styling-with-utility-classes) but you can style using scss, or css directly if you prefer.
 
 ## Getting Started
 

apps/angular-task/project.json

@@ -19,7 +19,7 @@
           "zone.js"
         ],
         "tsConfig": "apps/angular-task/tsconfig.app.json",
-        "inlineStyleLanguage": "scss",
+        "inlineStyleLanguage": "css",
         "assets": [
           {
             "glob": "**/*",
@@ -28,7 +28,7 @@
         ],
         "styles": [
           "@angular/material/prebuilt-themes/azure-blue.css",
-          "apps/angular-task/src/styles.scss"
+          "apps/angular-task/src/styles.css"
         ],
         "scripts": [],
         "server": "apps/angular-task/src/main.server.ts",

apps/angular-task/src/app/app.component.scss

@@ -2,10 +2,12 @@ import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 @Component({
+    host: {
+        class: 'block p-4'
+    },
     imports: [RouterModule],
     selector: 'crx-root',
     templateUrl: './app.component.html',
-    styleUrl: './app.component.scss'
 })
 export class AppComponent {
 

apps/angular-task/src/app/app.component.ts

@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 html,
 body {
     height: 100%;

apps/angular-task/src/styles.scss apps/angular-task/src/styles.cssapps/angular-task/src/styles.scss renamed to apps/angular-task/src/styles.css

@@ -65,15 +65,15 @@
       "e2eTestRunner": "playwright",
       "prefix": "crx",
       "linter": "eslint",
-      "style": "scss",
+      "style": "css",
       "unitTestRunner": "jest"
     },
     "@nx/angular:library": {
       "linter": "eslint",
       "unitTestRunner": "jest"
     },
     "@nx/angular:component": {
-      "style": "scss",
+      "style": "css",
       "standalone": true
     }
   },