refactor tailwind config path, add tailwind document

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)

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",

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'),

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;