From 121ef4edc7b2de4a391159e3b4e468d4d069ef7e Mon Sep 17 00:00:00 2001 From: NullVoxPopuli Date: Thu, 6 Jan 2022 15:52:05 -0500 Subject: [PATCH 01/13] Add tailwind appendix --- guides/appendix/tailwind.md | 69 +++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 guides/appendix/tailwind.md diff --git a/guides/appendix/tailwind.md b/guides/appendix/tailwind.md new file mode 100644 index 0000000..c98a6eb --- /dev/null +++ b/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 with Ember, this guide follows the [Tailwing 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 + 'use strict'; + + module.exports = { + content: [`./app/**/*.{html,js,ts,hbs}`], + theme: { + extend: { }, + }, + plugins: [], + }; + ``` + +- `postcss.config.js` + + ```js + 'use strict'; + + module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + } + } + ``` + +- `tailwind-input.css` + + ```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. + +``` +"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", +``` + +In addition to the two new scripts, `tailwind:build` and `tailwind:watch`, the `build` script, which was pre-existing 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 benificial 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 +` +``` From 7657add4d06cd73fccad1d6d4f08184bd22b20ad Mon Sep 17 00:00:00 2001 From: NullVoxPopuli Date: Thu, 6 Jan 2022 15:57:34 -0500 Subject: [PATCH 02/13] specify pages --- guides/pages.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/guides/pages.yml b/guides/pages.yml index e9a50ba..5ad3810 100644 --- a/guides/pages.yml +++ b/guides/pages.yml @@ -81,3 +81,5 @@ url: 'dev-tools' - title: 'Common issues' url: 'common-issues' + - title: 'Tailwind' + url: 'tailwind' From 913387bb0212ee68ef08b4e0c3ace91e812d7749 Mon Sep 17 00:00:00 2001 From: NullVoxPopuli Date: Thu, 6 Jan 2022 16:07:29 -0500 Subject: [PATCH 03/13] Use diff syntax for package.json changes --- guides/appendix/tailwind.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/guides/appendix/tailwind.md b/guides/appendix/tailwind.md index c98a6eb..740c7e2 100644 --- a/guides/appendix/tailwind.md +++ b/guides/appendix/tailwind.md @@ -1,6 +1,6 @@ [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 with Ember, this guide follows the [Tailwing Getting Started](https://tailwindcss.com/docs/installation) guide, with some minor tweaks to file names and their locations. +To use Tailwind-JIT with Ember, this guide follows the [Tailwing 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 @@ -47,11 +47,11 @@ then, from your project's root directory add the following files: Now we need to add some scripts to the package.json to make interacting with the tailwind CLI a little easier. -``` -"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", +```diff ++ "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 pre-existing 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.) From b2811e0a86e5fa0e8c98b808d7b94816a22bece0 Mon Sep 17 00:00:00 2001 From: NullVoxPopuli Date: Thu, 6 Jan 2022 16:09:51 -0500 Subject: [PATCH 04/13] Fix lints --- .local.dic | 3 ++- guides/appendix/tailwind.md | 8 ++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/.local.dic b/.local.dic index e943326..7afff99 100644 --- a/.local.dic +++ b/.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 \ No newline at end of file +WSL diff --git a/guides/appendix/tailwind.md b/guides/appendix/tailwind.md index 740c7e2..af9353c 100644 --- a/guides/appendix/tailwind.md +++ b/guides/appendix/tailwind.md @@ -1,6 +1,6 @@ [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 [Tailwing Getting Started](https://tailwindcss.com/docs/installation) guide, with some minor tweaks to file names and their locations. +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 @@ -54,13 +54,13 @@ interacting with the tailwind CLI a little easier. - "build": "ember build --environment=production", ``` -In addition to the two new scripts, `tailwind:build` and `tailwind:watch`, the `build` script, which was pre-existing 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.) +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 benificial to add `public/assets/tailwind.css` to the `.gitignore` +- `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: From db82fe014b675bfb62d4a92ae45a4556ec87aaf5 Mon Sep 17 00:00:00 2001 From: NullVoxPopuli Date: Thu, 6 Jan 2022 16:25:01 -0500 Subject: [PATCH 05/13] add filenames to code snippets --- guides/appendix/tailwind.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/guides/appendix/tailwind.md b/guides/appendix/tailwind.md index af9353c..0346d71 100644 --- a/guides/appendix/tailwind.md +++ b/guides/appendix/tailwind.md @@ -11,7 +11,7 @@ then, from your project's root directory add the following files: - `tailwind.config.js` - ```js + ```js {data-filename="tailwind.config.js"} 'use strict'; module.exports = { @@ -25,7 +25,7 @@ then, from your project's root directory add the following files: - `postcss.config.js` - ```js + ```js {data-filename="postcss.config.js"} 'use strict'; module.exports = { @@ -38,7 +38,7 @@ then, from your project's root directory add the following files: - `tailwind-input.css` - ```css + ```css {data-filename="tailwind-input.css"} @tailwind base; @tailwind components; @tailwind utilities; @@ -47,7 +47,7 @@ then, from your project's root directory add the following files: Now we need to add some scripts to the package.json to make interacting with the tailwind CLI a little easier. -```diff +```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", From d64516475442ca4bc9f8e76a926a6cff8c2be331 Mon Sep 17 00:00:00 2001 From: NullVoxPopuli Date: Thu, 6 Jan 2022 20:43:04 -0500 Subject: [PATCH 06/13] Update guides/appendix/tailwind.md Co-authored-by: Jen Weber --- guides/appendix/tailwind.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/appendix/tailwind.md b/guides/appendix/tailwind.md index 0346d71..0c8a737 100644 --- a/guides/appendix/tailwind.md +++ b/guides/appendix/tailwind.md @@ -59,7 +59,7 @@ In addition to the two new scripts, `tailwind:build` and `tailwind:watch`, the ` 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 +- `npm 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: From 8a4e3351c731b19383bfed476fdbe557fa0a0338 Mon Sep 17 00:00:00 2001 From: NullVoxPopuli Date: Thu, 6 Jan 2022 20:43:10 -0500 Subject: [PATCH 07/13] Update guides/appendix/tailwind.md Co-authored-by: Jen Weber --- guides/appendix/tailwind.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/appendix/tailwind.md b/guides/appendix/tailwind.md index 0c8a737..58a65c8 100644 --- a/guides/appendix/tailwind.md +++ b/guides/appendix/tailwind.md @@ -44,7 +44,7 @@ then, from your project's root directory add the following files: @tailwind utilities; ``` -Now we need to add some scripts to the package.json to make +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"} From c35f226c3cc9fdff9e52c2b0271a8b0c7935c35f Mon Sep 17 00:00:00 2001 From: NullVoxPopuli Date: Thu, 6 Jan 2022 20:43:15 -0500 Subject: [PATCH 08/13] Update guides/appendix/tailwind.md Co-authored-by: Jen Weber --- guides/appendix/tailwind.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/appendix/tailwind.md b/guides/appendix/tailwind.md index 58a65c8..ecba300 100644 --- a/guides/appendix/tailwind.md +++ b/guides/appendix/tailwind.md @@ -7,7 +7,7 @@ To get started, installing the following dependencies npm install autoprefixer postcss tailwindcss ``` -then, from your project's root directory add the following files: +Then, from your project's root directory, add the following files: - `tailwind.config.js` From 4b797f1e1a872cee3c22ed36fb21f47d0ce58043 Mon Sep 17 00:00:00 2001 From: NullVoxPopuli Date: Thu, 6 Jan 2022 20:43:22 -0500 Subject: [PATCH 09/13] Update guides/appendix/tailwind.md Co-authored-by: Jen Weber --- guides/appendix/tailwind.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/appendix/tailwind.md b/guides/appendix/tailwind.md index ecba300..fff081c 100644 --- a/guides/appendix/tailwind.md +++ b/guides/appendix/tailwind.md @@ -2,7 +2,7 @@ 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 +To get started, install the following dependencies: ```shell npm install autoprefixer postcss tailwindcss ``` From 0fbcdacc895ad8d4d2a2d02af15647d490cac3df Mon Sep 17 00:00:00 2001 From: NullVoxPopuli Date: Thu, 6 Jan 2022 20:52:57 -0500 Subject: [PATCH 10/13] Rename page, try to frame as live-reload integration example --- guides/appendix/{tailwind.md => live-reload.md} | 12 ++++++++++++ guides/pages.yml | 2 +- 2 files changed, 13 insertions(+), 1 deletion(-) rename guides/appendix/{tailwind.md => live-reload.md} (85%) diff --git a/guides/appendix/tailwind.md b/guides/appendix/live-reload.md similarity index 85% rename from guides/appendix/tailwind.md rename to guides/appendix/live-reload.md index fff081c..7208ac4 100644 --- a/guides/appendix/tailwind.md +++ b/guides/appendix/live-reload.md @@ -1,3 +1,15 @@ +Integrating with ember's live-reload system can be fairly straight-forward. + +In short, any tool that can output or change files automatically can be used to add live-reload behavior. + +The process is: + +- emit some file to either the `public` or `app` tree +- `link` or `import` the file from existing `ember` code + +An example of this behavior and integration can be shown with a CSS authoring tool, Tailwind. + + [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. diff --git a/guides/pages.yml b/guides/pages.yml index 5ad3810..95b0b1e 100644 --- a/guides/pages.yml +++ b/guides/pages.yml @@ -82,4 +82,4 @@ - title: 'Common issues' url: 'common-issues' - title: 'Tailwind' - url: 'tailwind' + url: 'live-reload' From 7b573a7d4aba8d1ac2b2720511698929446d69dc Mon Sep 17 00:00:00 2001 From: NullVoxPopuli Date: Thu, 6 Jan 2022 20:54:16 -0500 Subject: [PATCH 11/13] Add finalizing comment --- guides/appendix/live-reload.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/guides/appendix/live-reload.md b/guides/appendix/live-reload.md index 7208ac4..875618b 100644 --- a/guides/appendix/live-reload.md +++ b/guides/appendix/live-reload.md @@ -79,3 +79,5 @@ Lastly, we need to edit the `app/index.html` file to include the `tailwind.css` ```html ` ``` + +With these things in place, you'll be able to use all of Tailwind's capabilities, including JIT compilation. From 1bf0cb7d5e920c2d17960340c6fb205f43a2c051 Mon Sep 17 00:00:00 2001 From: NullVoxPopuli Date: Sat, 8 Jan 2022 15:18:31 -0500 Subject: [PATCH 12/13] Apply prose suggestions from PR feedback --- guides/appendix/live-reload.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/guides/appendix/live-reload.md b/guides/appendix/live-reload.md index 875618b..46ffd71 100644 --- a/guides/appendix/live-reload.md +++ b/guides/appendix/live-reload.md @@ -1,4 +1,7 @@ -Integrating with ember's live-reload system can be fairly straight-forward. +For most JavaScript dependencies, installing them in your Ember app can be as quick as `npm install `. +However, there are some libraries within the JavaScript ecosystem that have additional tooling that needs to integrate +with Ember's live-reload features for the best developer-experience. In this guide, you will learn how to install +and configure libraries to integrate with Ember's live-reload. In short, any tool that can output or change files automatically can be used to add live-reload behavior. @@ -10,7 +13,7 @@ The process is: An example of this behavior and integration can be shown with a CSS authoring tool, Tailwind. -[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. +[Tailwind](https://tailwindcss.com/) is a popular way to use utility-first CSS classes in an app. It can be used within many frontend frameworks, including Ember. 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. @@ -77,7 +80,7 @@ A couple notes though: Lastly, we need to edit the `app/index.html` file to include the `tailwind.css` file: ```html -` + ``` With these things in place, you'll be able to use all of Tailwind's capabilities, including JIT compilation. From 94a1d5cdbecb0b837aef7f52b1cd261837a6bb19 Mon Sep 17 00:00:00 2001 From: NullVoxPopuli Date: Thu, 13 Jan 2022 11:39:41 -0500 Subject: [PATCH 13/13] Make post-learning-team-meeting changes --- guides/appendix/live-reload.md | 3 +++ guides/pages.yml | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/guides/appendix/live-reload.md b/guides/appendix/live-reload.md index 46ffd71..4475be7 100644 --- a/guides/appendix/live-reload.md +++ b/guides/appendix/live-reload.md @@ -10,6 +10,9 @@ The process is: - emit some file to either the `public` or `app` tree - `link` or `import` the file from existing `ember` code + +## Tailwind + An example of this behavior and integration can be shown with a CSS authoring tool, Tailwind. diff --git a/guides/pages.yml b/guides/pages.yml index 95b0b1e..769da0a 100644 --- a/guides/pages.yml +++ b/guides/pages.yml @@ -81,5 +81,5 @@ url: 'dev-tools' - title: 'Common issues' url: 'common-issues' - - title: 'Tailwind' + - title: 'Live reload integration' url: 'live-reload'