force tailwind config

craco.config.js

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

package.json

@@ -20,7 +20,8 @@
     "test": "craco test",
     "eject": "react-scripts eject",
     "predeploy": "npm run build",
-    "deploy": "gh-pages -d build"
+    "deploy": "gh-pages -d build --dotfiles --debug",
+    "postinstall": "tailwindcss build -i ./src/index.css -o ./src/tailwind.output.css"
   },
   "eslintConfig": {
     "extends": [

src/App.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Home from './Home';
+import './index.css';
 
 function App() {
   return (

src/index.css

@@ -1,3 +1,20 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+/* Force Tailwind to include all styles */
+@layer utilities {
+  .all-classes {
+    @apply 
+      p-4 m-4 
+      text-sm text-lg text-xl text-2xl
+      font-bold font-semibold
+      bg-green-100 bg-green-200 bg-green-300 bg-green-400 bg-green-500 bg-green-600 bg-green-700 bg-green-800 bg-green-900
+      text-white text-black
+      rounded-lg shadow-lg
+      flex flex-col items-center justify-between
+      grid grid-cols-1 md:grid-cols-2
+      hover:bg-green-600 hover:text-white
+      transition duration-300;
+  }
+}

src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import './tailwind.output.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(