Update tailwind-css.md CSS-in-JS instructions (#16443)

* Update tailwind-css.md css-in-js instructions

* Add more supporting comments, fix indentation

* chore: format

Author: sisi-sh

docs/docs/tailwind-css.md

@@ -23,7 +23,9 @@ This guide assumes that you have a Gatsby project set up. If you need to set up
 npm install tailwindcss --save-dev
 ```
 
-2. Generate Tailwind config file
+2. Generate Tailwind config file (optional)
+
+**Note**: A config file isn't required for Tailwind 1.0.0+
 
 To configure Tailwind, we'll need to add a Tailwind configuration file. Luckily, Tailwind has a built-in script to do this. Just run the following command:
 
@@ -67,8 +69,23 @@ 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 TailwindCSS 0.7.4.
+
+**Option 1**: Install `tailwind.macro@next` and use Tailwind 1.0.0+
+
 ```shell
-npm install --save tailwind.macro
+npm install --save tailwind.macro@next
+```
+
+**Option 2**: Install stable `tailwind.macro` and use Tailwind 0.7.4
+
+```bash
+// Remove tailwind 1.0.0+ if you've already installed it
+npm uninstall tailwindcss
+
+// Install tailwind 0.7.4 and stable tailwind.macro
+npm install [email protected]
+npm install tailwind.macro
 ```
 
 2. Use the Babel Macro (tailwind.macro) in your styled component
@@ -77,9 +94,15 @@ npm install --save tailwind.macro
 import styled from "styled-components"
 import tw from "tailwind.macro"
 
+// All versions
 const Button = styled.button`
   ${tw`bg-blue hover:bg-blue-dark text-white p-2 rounded`};
 `
+
+// tailwind.macro@next
+const Button = tw.button`
+  bg-blue hover:bg-blue-dark text-white p-2 rounded
+`
 ```
 
 ## Other resources