Add quick and dirty README docs

Author: adamwathan

README.md

@@ -1,3 +1,164 @@
 # TailwindCSS
 
 A utility-first CSS framework for rapid UI development.
+
+## Getting Started
+
+1. Add the library to your project as a Git repo dependency:
+
+    ```sh
+    # Using npm
+    npm install git+ssh://git@github.com:nothingworksinc/tailwindcss.git#master
+
+    # Using Yarn
+    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:
+
+    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');
+
+    mix..less('resources/assets/less/app.less', 'public/css')
+        .options({
+            postCss: [
+                require('tailwindcss')(require('./tailwind.js'))
+            ]
+        })
+    ```
+
+4. Create a CSS (or Less, Sass, Stylus, whatever) file as your main stylesheet, structured like this:
+
+    ```less
+    /**
+     * This injects Tailwind's base styles, which is a combination of
+     * Normalize.css and some additional base styles.
+     *
+     * You can see the styles here:
+     * https://github.com/nothingworksinc/tailwindcss/blob/master/css/preflight.css
+     */
+    @tailwind reset;
+
+    /**
+     * Here you would import any custom component classes; stuff that you'd
+     * want loaded *before* the utilities so that the utilities can still
+     * override them.
+     */
+    @import "my-components/foo";
+    @import "my-components/bar";
+
+    /**
+     * This injects all of Tailwind's utility classes, generated based on your
+     * config file.
+     */
+    @tailwind utilities;
+
+    /**
+     * Here you would add any custom utilities you need that don't come out of the box with Tailwind.
+     */
+    .bg-hero-image {
+        background-image: url('/some/image/file.png');
+    }
+    ```
+
+## Style Reference
+
+Until the real documentation is ready, you can reference this file to see which classes exist and what they do:
+
+https://github.com/nothingworksinc/tailwindcss/blob/master/dist/tailwind.css
+
+## Additional Features
+
+### Classes as Mixins
+
+To use existing utility classes as mixins in your custom component classes, use the `@apply` custom at-rule:
+
+```less
+.btn-primary {
+    @apply .bg-blue;
+    @apply .px-4;
+    @apply .py-2;
+    @apply .text-light;
+
+    &:hover {
+        @apply .bg-blue-dark;
+    }
+}
+```
+
+### 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:
+
+```less
+.markdown pre {
+    border: 1px solid tailwind('borders.defaults.color');
+    border-left: 4px solid tailwind('borders.colors.dark');
+}
+```
+
+### Creating responsive versions of your own utilities
+
+You can generate responsive versions of your own utilities by wrapping their definitions in the `@responsive` at-rule:
+
+```css
+@responsive {
+    .bg-gradient-brand {
+        background-image: linear-gradient(blue, green);
+    }
+}
+```
+
+This will generate these classes (assuming you haven't changed the default breakpoints):
+
+```css
+.bg-gradient-brand {
+    background-image: linear-gradient(blue, green);
+}
+@media (min-width: 576px) {
+    .sm\:bg-gradient-brand {
+        background-image: linear-gradient(blue, green);
+    }
+}
+@media (min-width: 768px) {
+    .md\:bg-gradient-brand {
+        background-image: linear-gradient(blue, green);
+    }
+}
+@media (min-width: 992px) {
+    .lg\:bg-gradient-brand {
+        background-image: linear-gradient(blue, green);
+    }
+}
+@media (min-width: 1200px) {
+    .xl\:bg-gradient-brand {
+        background-image: linear-gradient(blue, green);
+    }
+}
+```
+
+### Media query shorthand
+
+Say you have a `sm` breakpoint at 576px, and you need to write some custom CSS that references this breakpoint.
+
+Instead of duplicating the values like this:
+
+```css
+@media (min-width: 576px) {
+    /* ... */
+}
+```
+
+...you can use the `@screen` at-rule and pass the breakpoint name:
+
+```css
+@screen sm {
+    /* ... */
+}
+```