tailwind.macro has depreciated (#22065)

* tailwind.macro has depreciated

added Twin docs for versions 1.0.0+ of Tailwind

* Update docs/docs/tailwind-css.md

Co-Authored-By: LB <laurie@gatsbyjs.com>

* Update docs/docs/tailwind-css.md

Co-Authored-By: LB <laurie@gatsbyjs.com>

* Update docs/docs/tailwind-css.md

Co-Authored-By: LB <laurie@gatsbyjs.com>

* Update docs/docs/tailwind-css.md

Co-Authored-By: LB <laurie@gatsbyjs.com>

* Update docs/docs/tailwind-css.md

Co-Authored-By: Jeremy Swanborough <jeremy@swanburger.com>

* chore: format

Co-authored-by: LB <laurie@gatsbyjs.com>
Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

Author: 3 people

docs/docs/tailwind-css.md

@@ -70,12 +70,28 @@ These steps assume you have a CSS-in-JS library already installed, and the examp
 
 1. Install Tailwind Babel Macro
 
-**Note**: `tailwind.macro` isn't currently compatible with Tailwind 1.0.0+. However, a compatible beta is available at `tailwind.macro@next`. Feel free to either use the beta or revert to Tailwind 0.7.4.
+**Note**: `tailwind.macro` isn't currently compatible with Tailwind 1.0.0+. However, a new forked project can be found at `twin.macro` that supports Tailwindcss v1.2 classes. It's currently in pre-release so not all plugins are supported at the time of writing. Alternatively, you can revert to Tailwind 0.7.4.
 
-**Option 1**: Install `tailwind.macro@next` and use Tailwind 1.0.0+
+**Option 1**: Install `twin.macro` and use Tailwind 1.2.0+
+
+1. Install Twin and Emotion
 
 ```shell
-npm install --save tailwind.macro@next
+npm install -D twin.macro @emotion/core @emotion/styled gatsby-plugin-emotion
+```
+
+2. Import the Tailwind base styles
+
+```javascript:title=gatsby-browser.js
+import "tailwindcss/dist/base.css"
+```
+
+3. Enable the Gatsby emotion plugin
+
+```javascript:title=gatsby-config.js
+module.exports = {
+  plugins: [`gatsby-plugin-emotion`],
+}
 ```
 
 **Option 2**: Install stable `tailwind.macro` and use Tailwind 0.7.4