Postcss7 compatibility

[RobinMalfait]

We want to use PostCSS 8 in Tailwind, however a lot of tools are not compatible with PostCSS 7 yet. To account for this we can will create a separate tag on npm:

npm install tailwindcss@compat

---

To get the repo into PostCSS 7 mode we have to run yarn compat or npm run compat. This will prepare the repo for PostCSS 7 mode. Essentially it will do multiple things:

1. Run yarn babelify, to ensure that we have the latest and greatest build
2. Update package.json to include dependencies from the package.postcss7.json file, it will deeply merge all the values
3. Use the lib/index.postcss7.js as entry point, this will allow us to use the "old" PostCSS Plugin register system.

Once you run this command, you will get the following output:

You can safely publish `tailwindcss` in PostCSS 7 compatibility mode:

  npm version
  npm publish --tag compat
  npm run compat:restore

2 important parts here are the publish with the --tag of compat, this allows for the npm install tailwindcss@compat.

To restore everything to normal, you can use the yarn compat:restore or npm run compat:restore. This does the inverse and uses the old package.json and lib/index.js entry point.

This will output:

Restored from PostCSS 7 mode to latest PostCSS mode!

[codecov-io]

Codecov Report

Merging #2773 (1476c49) into master (f57fbb6) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #2773   +/-   ##
=======================================
  Coverage   93.19%   93.19%           
=======================================
  Files         177      177           
  Lines        1793     1793           
  Branches      317      317           
=======================================
  Hits         1671     1671           
  Misses        105      105           
  Partials       17       17           

Impacted Files	Coverage Δ
src/plugins/gradientColorStops.js	100.00% <0.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f57fbb6...1476c49. Read the comment docs.

[andresgutgon]

Awesome, thanks!. Thanks to this I have being building a Wordpress Theme + Laravel Mix + Tailwind 2.0 and I'm loving it!