Update README

README.md

@@ -14,27 +14,13 @@ A utility-first CSS framework for rapid UI development.
     yarn add git+ssh://git@github.com:nothingworksinc/tailwindcss.git#master
     ```
 
-2. Create a Tailwind config file for your project by copying the default config file from here:
+2. Create a Tailwind config file for your project by saving a copy of the default config file somewhere sensible, like `tailwind.js` in your project's root.
+
+    You can copy the default config file from here:
 
     https://github.com/nothingworksinc/tailwindcss/blob/master/src/defaultConfig.js
 
-3. Add Tailwind as a PostCSS plugin in your build chain, passing your config object as a parameter.
-
-    Here's an example using Laravel Mix:
-
-    ```js
-    const mix = require('laravel-mix');
-    const tailwind = require('tailwindcss');
-
-    mix.less('resources/assets/less/app.less', 'public/css')
-      .options({
-        postCss: [
-          tailwind(require('./path/to/your/tailwind/config.js'))
-        ]
-      });
-    ```
-
-4. Create a CSS (or Less, Sass, Stylus, whatever) file as your main stylesheet, structured like this:
+3. Create a CSS (or Less, Sass, Stylus, whatever) file as your main stylesheet, structured like this:
 
     ```less
     /**
@@ -68,6 +54,28 @@ A utility-first CSS framework for rapid UI development.
     }
     ```
 
+4. For simple projects or just taking Tailwind for a spin, use the `tailwind` CLI tool to process your CSS:
+
+    ```sh
+    ./node_modules/.bin/tailwind styles.css [-c ./custom-config.js] [-o ./output.css]
+    ```
+
+    For most projects, you'll want to add Tailwind as a PostCSS plugin in your build chain, passing your config object as a parameter.
+
+    Here's an example using Laravel Mix:
+
+    ```js
+    const mix = require('laravel-mix');
+    const tailwind = require('tailwindcss');
+
+    mix.less('resources/assets/less/app.less', 'public/css')
+      .options({
+        postCss: [
+          tailwind(require('./path/to/your/tailwind/config.js'))
+        ]
+      });
+    ```
+
 ## Style Reference
 
 Until the real documentation is ready, you can reference this file to see which classes exist and what they do:
@@ -76,26 +84,40 @@ https://github.com/nothingworksinc/tailwindcss/blob/master/dist/tailwind.css
 
 ## Additional Features
 
-### Classes as Mixins
+### Using utilities as mixins
 
 To use existing utility classes as mixins in your custom component classes, use the `@apply` custom at-rule:
 
 ```less
+// Input
 .btn-primary {
-    @apply .bg-blue;
-    @apply .px-4;
-    @apply .py-2;
-    @apply .text-light;
+  @apply .bg-blue;
+  @apply .px-4;
+  @apply .py-2;
+  @apply .text-light;
+}
+.btn-primary:hover {
+  @apply .bg-blue-dark;
+}
 
-    &:hover {
-        @apply .bg-blue-dark;
-    }
+// Output
+.btn-primary {
+  background-color: #4aa2ea;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+  color: #fff;
+}
+.btn-primary:hover {
+  background-color: #3687c8;
 }
 ```
 
+
 ### Referencing config values in your CSS
 
-It's not always possible to build component purely out of existing utilities. If you need reference any of your Tailwind config values directly, you can do so with the `tailwind(...)` helper function:
+It's not always possible to build components purely out of existing utilities. If you need to reference any of your Tailwind config values directly, you can do so with the `tailwind(...)` helper function:
 
 ```less
 .markdown pre {
@@ -110,9 +132,9 @@ You can generate responsive versions of your own utilities by wrapping their def
 
 ```css
 @responsive {
-    .bg-gradient-brand {
-        background-image: linear-gradient(blue, green);
-    }
+  .bg-gradient-brand {
+    background-image: linear-gradient(blue, green);
+  }
 }
 ```
 
@@ -120,27 +142,27 @@ This will generate these classes (assuming you haven't changed the default break
 
 ```css
 .bg-gradient-brand {
-    background-image: linear-gradient(blue, green);
+  background-image: linear-gradient(blue, green);
 }
 @media (min-width: 576px) {
-    .sm\:bg-gradient-brand {
-        background-image: linear-gradient(blue, green);
-    }
+  .sm\:bg-gradient-brand {
+    background-image: linear-gradient(blue, green);
+  }
 }
 @media (min-width: 768px) {
-    .md\:bg-gradient-brand {
-        background-image: linear-gradient(blue, green);
-    }
+  .md\:bg-gradient-brand {
+    background-image: linear-gradient(blue, green);
+  }
 }
 @media (min-width: 992px) {
-    .lg\:bg-gradient-brand {
-        background-image: linear-gradient(blue, green);
-    }
+  .lg\:bg-gradient-brand {
+    background-image: linear-gradient(blue, green);
+  }
 }
 @media (min-width: 1200px) {
-    .xl\:bg-gradient-brand {
-        background-image: linear-gradient(blue, green);
-    }
+  .xl\:bg-gradient-brand {
+    background-image: linear-gradient(blue, green);
+  }
 }
 ```
 
@@ -152,7 +174,7 @@ Instead of duplicating the values like this:
 
 ```css
 @media (min-width: 576px) {
-    /* ... */
+  /* ... */
 }
 ```
 
@@ -160,6 +182,6 @@ Instead of duplicating the values like this:
 
 ```css
 @screen sm {
-    /* ... */
+  /* ... */
 }
 ```