1- if ! command -v jq
2- then
3- echo " jq is required to be installed for this script"
4- exit
5- fi
6- 71if ! command -v npx
82then
93 echo " npx is required to be installed for this script"
104 exit
115fi
126
13- if ! command -v yarn
14- then
15- echo " yarn is required to be installed for this script"
16- exit
17- fi
18- 19- echo " HERE"
7+ echo " Creating a new project using create-react-app"
208npx create-react-app 1ドル
219cd 1ドル
22- yarn add tailwindcss --dev
23- npx tailwind init tailwind.js --full
24- yarn add postcss-cli autoprefixer --dev
2510
26- cat << EOT >> postcss.config.js
27- const tailwindcss = require('tailwindcss');
11+ echo " Adding tailwindcss, postcss and autoprefixer as a dependency"
12+ npm add -D tailwindcss postcss autoprefixer
13+ npx tailwindcss init -p
14+ 15+ echo " Configuring valid files glob for tailwindcss.config.js"
16+ cat << EOT > tailwind.config.js
2817module.exports = {
29- plugins: [
30- tailwindcss('./tailwind.js'),
31- require('autoprefixer'),
32- ],
33- };
18+ content: [
19+ "./src/**/*.{js,jsx,ts,tsx}",
20+ ],
21+ theme: {
22+ extend: {},
23+ },
24+ plugins: [],
25+ }
3426EOT
3527
36- mkdir src/styles
37- 38- cat << EOT > src/styles/index.css
28+ echo " Configuring src/index.css"
29+ cat << EOT > src/index.css
3930@tailwind base;
4031@tailwind components;
4132@tailwind utilities;
4233EOT
4334
44- touch src/styles/tailwind.css
45- 46- 47- jq ' .scripts={
48- "build:style":"tailwind build src/styles/index.css -o src/styles/tailwind.css",
49- "watch:style": "tailwind build src/styles/index.css -o src/styles/tailwind.css --watch",
50- "start": "npm run build:style && react-scripts start",
51- "build": "react-scripts build",
52- "test": "react-scripts test",
53- "eject": "react-scripts eject"
54- }' package.json > package.json.temp
55- mv package.json.temp package.json
56- 57- rm -rf src/index.css
58- rm -rf src/App.css
59- 60- sed -i ' s/\.\/index.css/.\/styles\/tailwind.css/'
61- sed -i ' /App.css/d'
35+ sed -i ' ' ' s|<code>|<code className="border-2 border-indigo-500 bg-indigo-900 rounded-xl p-2">|'
0 commit comments