Adan099 · October 2, 2023 07:29 · Jun 29, 2020 · Jun 28, 2020 · Jun 27, 2020 · Jun 27, 2020
diff --git a/README.md b/README.md
@@ -71,7 +71,7 @@ For more about `ember-cli-postcss` check out the [documentation](https://jeffjew
 
 Now you can install the Tailwind package directly using `npm` or `yarn`:
 
-```
+```console
 # Using npm
 $ npm install --save-dev tailwindcss
 
@@ -99,7 +99,7 @@ Tailwind will swap these directives out at build time with all of its generated
 
 If you'd like to customize your Tailwind installation, you can generate a config file for your project using the Tailwind CLI.
 
-```
+```console
 $ npx tailwind init app/styles/tailwind.config.js
 ```
 
@@ -138,7 +138,7 @@ Now your done, you have successfully added [PostCSS](https://postcss.org/) and [
 
 To be able to import styles from other files with the `@import` statement and split your CSS in multiple file, you need `postcss-import`: 
 
-```
+```console
 # Using npm 
 $ npm install --save-dev postcss-import
 

diff --git a/README.md b/README.md
@@ -6,7 +6,6 @@
 $ ember install ember-cli-postcss                   # Install ember-cli-postcss
 $ npm install --save-dev tailwindcss                # Install tailwindcss
 
-
 $ npx tailwind init app/styles/tailwind.config.js   # Optional: Generate a Tailwind config file for your project  
 $ npm install -save-dev postcss-import              # Optional: If you want to use the @import statement
 ```

diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 ## TL;DR
 
-```bash
+```console
 $ ember install ember-cli-postcss                   # Install ember-cli-postcss
 $ npm install --save-dev tailwindcss                # Install tailwindcss
 

diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 ## TL;DR
 
-```console
+```bash
 $ ember install ember-cli-postcss                   # Install ember-cli-postcss
 $ npm install --save-dev tailwindcss                # Install tailwindcss
 

diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 ## TL;DR
 
-```
+```console
 $ ember install ember-cli-postcss                   # Install ember-cli-postcss
 $ npm install --save-dev tailwindcss                # Install tailwindcss
 

diff --git a/README.md b/README.md
@@ -43,7 +43,7 @@ module.exports = function(defaults) {
 
 ## Overview 
 
-> Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
+> **Tailwind CSS** is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
 > 
 > - https://tailwindcss.com/
 

diff --git a/README.md b/README.md
@@ -182,5 +182,5 @@ Now you can use the `@import` statement in your `app.css`:
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@import "custom.css"  /* This will import the CSS form custom.css */
+@import "custom"  /* This will import the CSS form custom.css */
 ```
diff --git a/README.md b/README.md
@@ -43,6 +43,10 @@ module.exports = function(defaults) {
 
 ## Overview 
 
+> Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
+> 
+> - https://tailwindcss.com/
+
 The goal is to make your Ember.js app integrate with [PostCSS](https://postcss.org/) and use [Tailwind](https://tailwindcss.com/) as a plugin. 
 
 > **PostCSS** is a tool for CSS syntax transformations.

diff --git a/README.md b/README.md
@@ -129,7 +129,7 @@ module.exports = function(defaults) {
 };
 ```
 
-Now your done, you have your app integrated with [PostCSS](https://postcss.org/) and [Tailwind](https://tailwindcss.com/). 
+Now your done, you have successfully added [PostCSS](https://postcss.org/) and [Tailwind](https://tailwindcss.com/) to your app. 
 
 ## Install `postcss-import` *(optional)*
 

diff --git a/README.md b/README.md
@@ -129,6 +129,8 @@ module.exports = function(defaults) {
 };
 ```
 
+Now your done, you have your app integrated with [PostCSS](https://postcss.org/) and [Tailwind](https://tailwindcss.com/). 
+
 ## Install `postcss-import` *(optional)*
 
 To be able to import styles from other files with the `@import` statement and split your CSS in multiple file, you need `postcss-import`: 

diff --git a/README.md b/README.md
@@ -14,11 +14,9 @@ $ npm install -save-dev postcss-import              # Optional: If you want to u
 ```css
 /* app/styles/app.css */
 
-@tailwind base;
-
-@tailwind components;
-
-@tailwind utilities;
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
 ```
 
 ```js

diff --git a/README.md b/README.md
@@ -8,6 +8,7 @@ $ npm install --save-dev tailwindcss                # Install tailwindcss
 
 
 $ npx tailwind init app/styles/tailwind.config.js   # Optional: Generate a Tailwind config file for your project  
+$ npm install -save-dev postcss-import              # Optional: If you want to use the @import statement
 ```
 
 ```css
@@ -30,8 +31,9 @@ module.exports = function(defaults) {
     postcssOptions: {
       compile: {
         plugins: [
+          // { module: require('postcss-import') }, // If you installed postcss-import
           require('tailwindcss'), 
-          // require('tailwindcss')('./app/styles/tailwind.config.js'), // If you have a Tailwind config file. 
+          // require('tailwindcss')('./app/styles/tailwind.config.js'), // If you have a Tailwind config file.
         ]
       }
     }

diff --git a/README.md b/README.md
@@ -141,7 +141,7 @@ $ npm install --save-dev postcss-import
 $ yarn add --dev postcss-import
 ```
 
-Since `postcss-import` is a PostCSS plugin (like `tailwindcss`), we have to add it your build chain.
+Since `postcss-import` is a PostCSS plugin (like `tailwindcss`), you have to add it your build chain.
 
 This means adding `postcss-import` to the list of plugins you pass to `ember-cli-postcss` in your `ember-cli-build.js`.
 

diff --git a/README.md b/README.md
@@ -83,11 +83,9 @@ After you install tailwind you need to use the `@tailwind` directive to inject T
 ```css
 /* app/styles/app.css */
 
-@tailwind base;
-
-@tailwind components;
-
-@tailwind utilities;
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
 ```
 
 Tailwind will swap these directives out at build time with all of its generated CSS.
@@ -96,7 +94,6 @@ Tailwind will swap these directives out at build time with all of its generated
 
 > Note: If you don't need to customize your Tailwind installation you can skip this step, and do it when you need to.
 
-
 If you'd like to customize your Tailwind installation, you can generate a config file for your project using the Tailwind CLI.
 
 ```
@@ -131,3 +128,53 @@ module.exports = function(defaults) {
   // ...
 };
 ```
+
+## Install `postcss-import` *(optional)*
+
+To be able to import styles from other files with the `@import` statement and split your CSS in multiple file, you need `postcss-import`: 
+
+```
+# Using npm 
+$ npm install --save-dev postcss-import
+
+# Using Yarn 
+$ yarn add --dev postcss-import
+```
+
+Since `postcss-import` is a PostCSS plugin (like `tailwindcss`), we have to add it your build chain.
+
+This means adding `postcss-import` to the list of plugins you pass to `ember-cli-postcss` in your `ember-cli-build.js`.
+
+```js
+// ember-cli-build.js
+
+// ... 
+
+module.exports = function(defaults) {
+  let app = new EmberApp(defaults, {
+    postcssOptions: {
+      compile: {
+        plugins: [
+          { module: require('postcss-import') }, 
+          require('tailwindcss'), 
+          // require('tailwindcss')('./app/styles/tailwind.config.js'), // If you have a Tailwind config file. 
+        ]
+      }
+    }
+  });
+
+  // ...
+};
+```
+
+Now you can use the `@import` statement in your `app.css`: 
+
+```css
+/* app/styles/app.css */
+
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import "custom.css"  /* This will import the CSS form custom.css */
+```
diff --git a/README.md b/README.md
@@ -94,6 +94,9 @@ Tailwind will swap these directives out at build time with all of its generated
 
 ## Create your Tailwind config file *(optional)*
 
+> Note: If you don't need to customize your Tailwind installation you can skip this step, and do it when you need to.
+
+
 If you'd like to customize your Tailwind installation, you can generate a config file for your project using the Tailwind CLI.
 
 ```

diff --git a/README.md b/README.md
@@ -104,7 +104,7 @@ For more about the Tailwind Configuration check out the [documentation](https://
 
 ## Process your CSS with Tailwind
 
-The first step is adding Tailwind as a PostCSS plugin in your build chain.
+The last step is adding Tailwind as a PostCSS plugin in your build chain.
 
 This means adding `tailwindcss` to the list of plugins you pass to `ember-cli-postcss` in your `ember-cli-build.js`.
 

diff --git a/README.md b/README.md
@@ -104,7 +104,7 @@ For more about the Tailwind Configuration check out the [documentation](https://
 
 ## Process your CSS with Tailwind
 
-You'll want to add Tailwind as a PostCSS plugin in your build chain.
+The first step is adding Tailwind as a PostCSS plugin in your build chain.
 
 This means adding `tailwindcss` to the list of plugins you pass to `ember-cli-postcss` in your `ember-cli-build.js`.
 

diff --git a/README.md b/README.md
@@ -102,7 +102,7 @@ $ npx tailwind init app/styles/tailwind.config.js
 
 For more about the Tailwind Configuration check out the [documentation](https://tailwindcss.com/docs/configuration/).
 
-## Process your CSS with Tailwind using `ember-cli-postcss`
+## Process your CSS with Tailwind
 
 You'll want to add Tailwind as a PostCSS plugin in your build chain.
 

diff --git a/README.md b/README.md
@@ -43,7 +43,7 @@ module.exports = function(defaults) {
 
 ## Overview 
 
-The goal is to make your Ember.js app integrate with [PostCSS](https://postcss.org/) and use Tailwind as a plugin. 
+The goal is to make your Ember.js app integrate with [PostCSS](https://postcss.org/) and use [Tailwind](https://tailwindcss.com/) as a plugin. 
 
 > **PostCSS** is a tool for CSS syntax transformations.
 > It allows you to define custom CSS like syntax that could be understandable and transformed by plugins.

diff --git a/README.md b/README.md
@@ -56,8 +56,6 @@ There is a huge number of plugins, Tailwind been one of them.
 
 The first step is making your app integrate with [PostCSS](https://postcss.org/). 
 
-
-
 You can use an add-on that helps you integreate PostCSS with Ember.js, `ember-cli-postcss`:
 
 ```console

diff --git a/README.md b/README.md
@@ -45,7 +45,7 @@ module.exports = function(defaults) {
 
 The goal is to make your Ember.js app integrate with [PostCSS](https://postcss.org/) and use Tailwind as a plugin. 
 
-> PostCSS is a tool for CSS syntax transformations.
+> **PostCSS** is a tool for CSS syntax transformations.
 > It allows you to define custom CSS like syntax that could be understandable and transformed by plugins.
 > 
 > - https://github.com/postcss/postcss/blob/master/docs/architecture.md#overview

diff --git a/README.md b/README.md
@@ -41,9 +41,24 @@ module.exports = function(defaults) {
 };
 ```
 
+## Overview 
+
+The goal is to make your Ember.js app integrate with [PostCSS](https://postcss.org/) and use Tailwind as a plugin. 
+
+> PostCSS is a tool for CSS syntax transformations.
+> It allows you to define custom CSS like syntax that could be understandable and transformed by plugins.
+> 
+> - https://github.com/postcss/postcss/blob/master/docs/architecture.md#overview
+
+There is a huge number of plugins, Tailwind been one of them. 
+
 ## Installing `ember-cli-postcss`
 
-The first step is making your app integrate with [PostCSS](https://postcss.org/). You can use an add-on for this purpose, `ember-cli-postcss`:
+The first step is making your app integrate with [PostCSS](https://postcss.org/). 
+
+
+
+You can use an add-on that helps you integreate PostCSS with Ember.js, `ember-cli-postcss`:
 
 ```console
 $ ember install ember-cli-postcss

diff --git a/README.md b/README.md
@@ -43,7 +43,7 @@ module.exports = function(defaults) {
 
 ## Installing `ember-cli-postcss`
 
-The first step is making your app integrate with PostCSS. You can use an add-on for this purpose, `ember-cli-postcss`:
+The first step is making your app integrate with [PostCSS](https://postcss.org/). You can use an add-on for this purpose, `ember-cli-postcss`:
 
 ```console
 $ ember install ember-cli-postcss

diff --git a/README.md b/README.md
@@ -65,6 +65,8 @@ $ yarn add --dev tailwindcss
 
 ## Add Tailwind to your CSS 
 
+After you install tailwind you need to use the `@tailwind` directive to inject Tailwind's `base`, `components`, and `utilities` styles into your CSS:
+
 ```css
 /* app/styles/app.css */
 
@@ -75,6 +77,8 @@ $ yarn add --dev tailwindcss
 @tailwind utilities;
 ```
 
+Tailwind will swap these directives out at build time with all of its generated CSS.
+
 ## Create your Tailwind config file *(optional)*
 
 If you'd like to customize your Tailwind installation, you can generate a config file for your project using the Tailwind CLI.

diff --git a/README.md b/README.md
@@ -53,6 +53,8 @@ For more about `ember-cli-postcss` check out the [documentation](https://jeffjew
 
 ## Install Tailwind
 
+Now you can install the Tailwind package directly using `npm` or `yarn`:
+
 ```
 # Using npm
 $ npm install --save-dev tailwindcss

diff --git a/README.md b/README.md
@@ -43,7 +43,7 @@ module.exports = function(defaults) {
 
 ## Installing `ember-cli-postcss`
 
-The first step is making your app integrate with PostCSS. You can use add-on for this purpose, `ember-cli-postcss`:
+The first step is making your app integrate with PostCSS. You can use an add-on for this purpose, `ember-cli-postcss`:
 
 ```console
 $ ember install ember-cli-postcss

diff --git a/README.md b/README.md
@@ -43,6 +43,8 @@ module.exports = function(defaults) {
 
 ## Installing `ember-cli-postcss`
 
+The first step is making your app integrate with PostCSS. You can use add-on for this purpose, `ember-cli-postcss`:
+
 ```console
 $ ember install ember-cli-postcss
 ```

diff --git a/README.md b/README.md
@@ -83,7 +83,9 @@ For more about the Tailwind Configuration check out the [documentation](https://
 
 ## Process your CSS with Tailwind using `ember-cli-postcss`
 
-You need to add `tailwindcss` to the list of plugins you pass to `ember-cli-postcss`.
+You'll want to add Tailwind as a PostCSS plugin in your build chain.
+
+This means adding `tailwindcss` to the list of plugins you pass to `ember-cli-postcss` in your `ember-cli-build.js`.
 
 ```js
 // ember-cli-build.js

diff --git a/README.md b/README.md
@@ -83,6 +83,8 @@ For more about the Tailwind Configuration check out the [documentation](https://
 
 ## Process your CSS with Tailwind using `ember-cli-postcss`
 
+You need to add `tailwindcss` to the list of plugins you pass to `ember-cli-postcss`.
+
 ```js
 // ember-cli-build.js
 

diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ $ ember install ember-cli-postcss                   # Install ember-cli-postcss
 $ npm install --save-dev tailwindcss                # Install tailwindcss
 
 
-$ npx tailwind init app/styles/tailwind.config.js   # Optional: Generate a tailwind config file for your project  
+$ npx tailwind init app/styles/tailwind.config.js   # Optional: Generate a Tailwind config file for your project  
 ```
 
 ```css
@@ -31,7 +31,7 @@ module.exports = function(defaults) {
       compile: {
         plugins: [
           require('tailwindcss'), 
-          // require('tailwindcss')('./app/styles/tailwind.config.js'), // If you have a tailwind config file. 
+          // require('tailwindcss')('./app/styles/tailwind.config.js'), // If you have a Tailwind config file. 
         ]
       }
     }
@@ -93,7 +93,8 @@ module.exports = function(defaults) {
     postcssOptions: {
       compile: {
         plugins: [
-          require('tailwindcss')('./app/styles/tailwind.config.js'),
+          require('tailwindcss'), 
+          // require('tailwindcss')('./app/styles/tailwind.config.js'), // If you have a Tailwind config file. 
         ]
       }
     }
No results found