From c707f912fcfa7f929d4c3674de7d92296f56879b Mon Sep 17 00:00:00 2001
From: gyeongwoopark <geewoo94@gmail.com>
Date: Fri, 17 Dec 2021 11:52:51 +0900
Subject: [PATCH 1/2] refactor: tailwind config path

---
 packages/react-scripts/config/paths.js          | 3 +++
 packages/react-scripts/config/webpack.config.js | 4 +---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js
index f4470a02f63..2f7654b5d92 100644
--- a/packages/react-scripts/config/paths.js
+++ b/packages/react-scripts/config/paths.js
@@ -70,6 +70,7 @@ module.exports = {
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),
   appJsConfig: resolveApp('jsconfig.json'),
+  tailwindConfig: resolveApp('tailwind.config.js'),
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
   proxySetup: resolveApp('src/setupProxy.js'),
@@ -96,6 +97,7 @@ module.exports = {
   appTsConfig: resolveApp('tsconfig.json'),
   appJsConfig: resolveApp('jsconfig.json'),
   yarnLockFile: resolveApp('yarn.lock'),
+  tailwindConfig: resolveApp('tailwind.config.js'),
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
   proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
@@ -134,6 +136,7 @@ if (
     appTsConfig: resolveOwn(`${templatePath}/tsconfig.json`),
     appJsConfig: resolveOwn(`${templatePath}/jsconfig.json`),
     yarnLockFile: resolveOwn(`${templatePath}/yarn.lock`),
+    tailwindConfig: resolveOwn(`${templatePath}/tailwind.config.js`),
     testsSetup: resolveModule(resolveOwn, `${templatePath}/src/setupTests`),
     proxySetup: resolveOwn(`${templatePath}/src/setupProxy.js`),
     appNodeModules: resolveOwn('node_modules'),
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 2b1b3bbd47d..3722299166a 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -69,9 +69,7 @@ const imageInlineSizeLimit = parseInt(
 const useTypeScript = fs.existsSync(paths.appTsConfig);
 
 // Check if Tailwind config exists
-const useTailwind = fs.existsSync(
-  path.join(paths.appPath, 'tailwind.config.js')
-);
+const useTailwind = fs.existsSync(paths.tailwindConfig);
 
 // Get the path to the uncompiled service worker (if it exists).
 const swSrc = paths.swSrc;

From d77bd50309b710a870f3a59248285fdbe27fd65f Mon Sep 17 00:00:00 2001
From: gyeongwoopark <geewoo94@gmail.com>
Date: Fri, 17 Dec 2021 11:53:35 +0900
Subject: [PATCH 2/2] docs: add tailwind document

---
 docusaurus/docs/adding-tailwind.md | 61 ++++++++++++++++++++++++++++++
 docusaurus/website/sidebars.json   |  1 +
 2 files changed, 62 insertions(+)
 create mode 100644 docusaurus/docs/adding-tailwind.md

diff --git a/docusaurus/docs/adding-tailwind.md b/docusaurus/docs/adding-tailwind.md
new file mode 100644
index 00000000000..b8b69ed17ec
--- /dev/null
+++ b/docusaurus/docs/adding-tailwind.md
@@ -0,0 +1,61 @@
+---
+id: adding-tailwind
+title: Adding Tailwind
+---
+
+> Note: this feature is available with `react-scripts@5.0.0` and higher.
+
+[Tailwind](https://tailwindcss.com/) is a utility-first CSS framework packed with classes.
+
+## Installation
+
+```sh
+npm install -D tailwindcss
+```
+
+## Usage
+
+1. You can use tailwind css simply adding `tailwind.config.js` in your root directory.
+
+```javascript
+// tailwind.config.js
+module.exports = {
+  content: ['./src/**/*.{html,js}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+```
+
+2. Import tailwind stylesheet.
+
+```css
+/* App.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+3. Example
+
+```javascript
+// App.js
+import './App.css';
+
+function App() {
+  return (
+    <div>
+      <h1 class="text-3xl font-bold underline">Hello world!</h1>
+    </div>
+  );
+}
+
+export default App;
+```
+
+---
+
+- Here is more guide for tailwind css configuration. [A guide to configuring and customizing your Tailwind installation.](https://tailwindcss.com/docs/configuration)
+
+- If you are using under `react-scripts@5.0.0` version, follow this step. [Install Tailwind CSS with Create React App](https://tailwindcss.com/docs/guides/create-react-app)
diff --git a/docusaurus/website/sidebars.json b/docusaurus/website/sidebars.json
index 386a29da1bf..48638b90b7f 100644
--- a/docusaurus/website/sidebars.json
+++ b/docusaurus/website/sidebars.json
@@ -19,6 +19,7 @@
       "adding-a-css-modules-stylesheet",
       "adding-a-sass-stylesheet",
       "adding-css-reset",
+      "adding-tailwind",
       "post-processing-css",
       "adding-images-fonts-and-files",
       "loading-graphql-files",