JimLynchCodes · March 26, 2020 03:20 · Mar 25, 2020
diff --git a/Installing-Tailwind-In-React.md b/Installing-Tailwind-In-React.md
@@ -0,0 +1,66 @@
+## Step 0) Create a new React project:
+```
+npx create-react-app tw-app
+```
+
+## Step 1) Create tailwind config file:
+```
+npx tailwindcss init --full
+```
+
+## Step 2) Add tailwind postcss dependencies:
+```
+yarn add tailwindcss postcss-cli autoprefixer -D
+```
+
+## Step 3) In the project root, create `postcss.config.js` containing this code:
+```
+const tailwindcss = require('tailwindcss')
+module.exports = {
+    plugin: [
+        tailwindcss('./tailwind.config.js'),
+        require('autoprefixer')
+    ]
+}
+```
+
+## Step 4) In `src` directory, create a folder named `styles`:
+```
+mkdir styles
+```
+
+## Step 5) In the `styles` directory you just created, create the file `tailwind.css` containing this postcss code:
+```
+@tailwind base;
+@tailwind component;
+@tailwind utilities;
+```
+
+## Step 6) In `package.json`, add a `tailwind:build` script:
+```
+"tailwind:build": "tailwind build src/styles/tailwind.css -o src/styles/app.css"
+```
+
+## Step 7) Edit the `build` and `start` scripts so that `tailwind:build` is run before the current commands:
+```
+"start": "npm run tailwind:build && react-scripts start",
+"build": "npm run tailwind:build && react-scripts build",
+```
+
+## Step 8) Run either `npm start` or `npm build` to generate the tailwind `app.css` file.
+
+## Step 9) In `App.js` (or your project's root component), add an import for the generated `styles/app.css`:
+```
+import `styles/app.css`
+```
+
+## Step 10) Check that tailwind has been successfully installed by adding a tailwind classes such as `text-6xl` or `text-gray-500`:
+```
+<p className="text-6xl text-gray-500">Hello, World!</p>
+```
+
+Sample project here: https://github.com/JimLynchCodes/How-To-Install-Tailwind-In-React-Source-Code
+
+Youtube video here: https://www.youtube.com/watch?v=_nRl46Tn1W8&t=610s
+
+Now go forth and build awesome things! ♥️ 👍
No results found