Update to make it work with react v18/tailwindcss v3

owaiswiz · owaiswiz · commit 4bf0a292a954 · 2022-04-15T06:39:15.000+05:30
diff --git a/README.md b/README.md
@@ -1,11 +1,9 @@
 ## Create React App - TailwindCSS Starter Generator
 A simple shell script that uses create-react-app to create a React Project and configures tailwindcss on top of it.
-
 ### Usage
 Clone the repo, or copy the run.sh script and then run with bash or any other shell:
 ```bash
-	bash run.sh name_of_your_project
+bash run.sh name_of_your_project
 ```
-
 ### LICENSE
 MIT
diff --git a/run.sh b/run.sh
@@ -1,61 +1,35 @@
-if ! command -v jq
-then
-    echo "jq is required to be installed for this script"
-    exit
-fi
-
 if ! command -v npx
 then
     echo "npx is required to be installed for this script"
     exit
 fi
 
-if ! command -v yarn
-then
-    echo "yarn is required to be installed for this script"
-    exit
-fi
-
-echo "HERE"
+echo "Creating a new project using create-react-app"
 npx create-react-app $1
 cd $1
-yarn add tailwindcss --dev
-npx tailwind init tailwind.js --full
-yarn add postcss-cli autoprefixer --dev
 
-cat <<EOT >> postcss.config.js
-const tailwindcss = require('tailwindcss');
+echo "Adding tailwindcss, postcss and autoprefixer as a dependency"
+npm add -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+
+echo "Configuring valid files glob for tailwindcss.config.js"
+cat <<EOT > tailwind.config.js
 module.exports = {
-    plugins: [
-        tailwindcss('./tailwind.js'),
-        require('autoprefixer'),
-    ],
-};
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
 EOT
 
-mkdir src/styles
-
-cat <<EOT > src/styles/index.css
+echo "Configuring src/index.css"
+cat <<EOT > src/index.css
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 EOT
 
-touch src/styles/tailwind.css
-
-
-jq '.scripts={
-"build:style":"tailwind build src/styles/index.css -o src/styles/tailwind.css",
-"watch:style": "tailwind build src/styles/index.css -o src/styles/tailwind.css --watch",
-"start": "npm run build:style && react-scripts start",
-"build": "react-scripts build",
-"test": "react-scripts test",
-"eject": "react-scripts eject"
-}' package.json > package.json.temp
-mv package.json.temp package.json
-
-rm -rf src/index.css
-rm -rf src/App.css
-
-sed -i 's/\.\/index.css/.\/styles\/tailwind.css/' src/index.js
-sed -i '/App.css/d' src/App.js
+sed -i '' 's|<code>|<code className="border-2 border-indigo-500 bg-indigo-900 rounded-xl p-2">|' src/App.js
