Merge pull request realstoman#16 from realstoman/upgrade-tailwindcss

Feat: Upgrade tailwindcss

Author: realstoman

README.md

@@ -10,8 +10,8 @@ A simple portfolio starter theme built with React and Tailwind CSS. This is the
 
 ## Features
 
--   [React](https://reactjs.org) with [React Router v6](https://reactrouter.com)
--   [Tailwind CSS v2](https://tailwindcss.com)
+-   [React v18](https://reactjs.org) with [React Router v6](https://reactrouter.com)
+-   [Tailwind CSS v3](https://tailwindcss.com)
 -   Context API For State Management
 -   Custom Hooks
 -   Framer Motion transitions & animations

craco.config.js

@@ -3,14 +3,13 @@
 	"version": "0.1.0",
 	"private": true,
 	"dependencies": {
-		"@craco/craco": "^6.4.1",
 		"@testing-library/jest-dom": "^5.11.4",
 		"@testing-library/react": "^11.1.0",
 		"@testing-library/user-event": "^12.1.10",
 		"framer-motion": "4.1.17",
-		"react": "^18.0.0",
+		"react": "^18.1.0",
 		"react-countup": "^6.1.1",
-		"react-dom": "^18.0.0",
+		"react-dom": "^18.1.0",
 		"react-icons": "^4.3.1",
 		"react-router-dom": "^6.0.2",
 		"react-scripts": "4.0.3",
@@ -19,10 +18,11 @@
 		"web-vitals": "^1.0.1"
 	},
 	"scripts": {
-		"start": "craco start",
-		"build": "craco build",
-		"test": "craco test",
-		"eject": "react-scripts eject"
+		"start": "yarn run build:css && react-scripts start",
+		"build": "yarn run react-scripts build",
+		"test": "react-scripts test",
+		"eject": "react-scripts eject",
+		"build:css": "postcss src/css/tailwind.css -o src/css/main.css"
 	},
 	"eslintConfig": {
 		"extends": [
@@ -43,8 +43,9 @@
 		]
 	},
 	"devDependencies": {
-		"autoprefixer": "^9.8.8",
-		"postcss": "^7.0.39",
-		"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
+		"@tailwindcss/forms": "^0.5.2",
+		"autoprefixer": "^10.4.7",
+		"postcss": "^8.4.14",
+		"tailwindcss": "^3.0.24"
 	}
 }

package.json

@@ -0,0 +1,4 @@
+const tailwindcss = require('tailwindcss');
+module.exports = {
+	plugins: [tailwindcss('./tailwind.config.js'), require('autoprefixer')],
+};