Add tailwind appendix

.local.dic

@@ -57,6 +57,7 @@ integrations
 Integrations
 Intellij-emberjs
 JetBrains
+JIT
 js-files
 linters
 LiveReload
@@ -105,4 +106,4 @@ VMware
 WebStorm
 Webstorm's
 workspaces
-WSL
+WSL

guides/appendix/tailwind.md

@@ -0,0 +1,69 @@
+[Tailwind](https://tailwindcss.com/) is a popular way to use utility-first classes in projects that helps unify large projects using design-tokens-as-code.
+
+To use Tailwind JIT with Ember, this guide follows the [Tailwind Getting Started](https://tailwindcss.com/docs/installation) guide, with some minor tweaks to file names and their locations.
+
+To get started, installing the following dependencies
+```shell
+npm install autoprefixer postcss tailwindcss
+```
+
+then, from your project's root directory add the following files:
+
+- `tailwind.config.js`
+
+  ```js {data-filename="tailwind.config.js"}
+  'use strict';
+
+  module.exports = {
+    content: [`./app/**/*.{html,js,ts,hbs}`],
+    theme: {
+      extend: {  },
+    },
+    plugins: [],
+  };
+  ```
+
+- `postcss.config.js`
+
+  ```js {data-filename="postcss.config.js"}
+  'use strict';
+
+  module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    }
+  }
+  ```
+
+- `tailwind-input.css`
+
+  ```css {data-filename="tailwind-input.css"}
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+  ```
+
+Now we need to add some scripts to the package.json to make
+interacting with the tailwind CLI a little easier.
+
+```diff {data-filename="package.json"}
++ "tailwind:build": "npx tailwindcss -i ./tailwind-input.css -o ./public/assets/tailwind.css",
++ "tailwind:watch": "npx tailwindcss -i ./tailwind-input.css -o ./public/assets/tailwind.css --watch",
++ "build": "npm run tailwind:build && ember build --environment=production",
+- "build": "ember build --environment=production",
+```
+
+In addition to the two new scripts, `tailwind:build` and `tailwind:watch`, the `build` script, which was preexisting for production builds, has been prefixed with a call to `tailwind:build` so that the tailwind assets are prepped for shipping to production (useful for C.I.)
+
+The above scripts expect that an input file, `./tailwind-input.css` will exist, and the tailwind CLI will output the compiled styles at `public/assets/tailwind.css`. Since this tailwind.css output file is in the public folder, changes to it will cause the `ember s` command to rebuild.
+
+A couple notes though:
+- `num run tailwind:watch` must be run in a separate terminal for development
+- it may be beneficial to add `public/assets/tailwind.css` to the `.gitignore`
+
+Lastly, we need to edit the `app/index.html` file to include the `tailwind.css` file:
+
+```html
+<link integrity="" rel="stylesheet" href="{{rootURL}}assets/tailwind.css">`
+```

guides/pages.yml

@@ -81,3 +81,5 @@
     url: 'dev-tools'
   - title: 'Common issues'
     url: 'common-issues'
+  - title: 'Tailwind'
+    url: 'tailwind'