Step/5 working with hovers and states

.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.eslintcache
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -1,18 +1,98 @@
 # Instructions
 
-## CDN
+This project walks through the features of TailwindCSS through branches that incrementally build on top of each other. Pull this repo down locally and checkout each branch one-by-one. I.e.: `git checkout step/1-***`, `git checkout step/2-***`, `git checkout step/3-***`, and so on.
 
-## CLI
+Eventually you will run NPM to build you bundle and run the project. So the latest Node and NPM are required.
 
-- `npx tailwindcss-cli build styles/app.css -o build/app.css`
+## Step 1 Hello World -- TailwindCSS via CDN
 
-### Notes
+The simplest way to get going with Tailwind is through the CDN. However, this is not for production use mostly because of the large file size. Though, it works for out demo.
 
-- You may have an issue with node on your first try. Make sure you version of Node is greater than 11.
+First, create an HTML page with a boilerplate HTML5 structure. Then add the following:
+`<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">`
+
+You can start playing around with the styles, but you won't get far without referring to the [documentation](https://tailwindcss.com/docs). If you are using Visual Studio Code, there is an easier way. Install the [TailwindCSS intellisense tool](https://tailwindcss.com/docs/intellisense) for autocomplete, syntax highlighting, and linting.
+
+## Step 2 TailwindCSS PostCSS plugin in your build process
+
+TailwindCSS will drop in easily to most modern project stacks. If you're using [Laravel](https://tailwindcss.com/docs/guides/laravel), React, Vue, or [Ruby on Rails](https://github.com/rails/tailwindcss-rails) you can find step-by-step [installation guides](https://tailwindcss.com/docs/installation). Using Tailwind with PostCSS and a preprocessor like SASS is possible, but not strongly recommended.
+
+Start by installing the dependencies:
+
+`npm install -D tailwindcss@latest postcss@latest autoprefixer@latest`
+
+Add a configuration file for PostCSS:
+```js
+// postcss.config.js
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}
+```
+
+Along with the `tailwindcss@latest` package you installed there is also a CLI tool. We can use that to generate a Tailwind config file now:
+
+`npx tailwindcss init -p`
+
+Next, you'll need to include Tailwind in a CSS file:
+
+```css
+/* ./your-css-folder/styles.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Now build your styles:
+`npx tailwindcss-cli build styles/app.css -o build/app.css`
+
+## Step 3 Mockup time
+
+For this simple demo we will use ViteJS, but you could use Parcel, or WebPack.
+
+`npm init @vitejs/app`
+
+Then add a new script command to your package json:
+```json
+  "scripts": {
+    ...
+    "dev": "vite",
+    ...
+  },
+
+```
+
+Now start up the local server with:
+`npm run dev`
+
+## Step 4 Using media queries
+
+Use responsive utilities to create adaptive layouts. Adding `sm:` or `md:` to classes will add `min-width` media queries.
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    screens: {
+      'tablet': '640px',
+      // => @media (min-width: 640px) { ... }
+
+      'laptop': '1024px',
+      // => @media (min-width: 1024px) { ... }
+
+      'desktop': '1280px',
+      // => @media (min-width: 1280px) { ... }
+    },
+  }
+}
+```
+
+## Step 5 Working with hovers and states
+
+Using utilities to style elements on hover, focus, and more.
+
+Almost any classes can be amended with the `hover:` class.
 
-## Build tool
 
-### Notes
-- Favor PostCSS -- you can use SASS, but native CSS is powerful enough on its own.
-- Install `tailwindcss` `postcss` `autoprefixer`
-- Setup tailwind with `npx tailwindcss init -p`