Fix and fully test, now i have custom colors to support tailwindcss 4, not 3

Author: BaseMax

.gitignore

@@ -1 +1,2 @@
 node_modules
+dist

index.html

@@ -35,5 +35,9 @@ <h2 class="text-2xl font-bold text-table-header mb-2">Card Title 2</h2>
     </a>
   </footer>
 
+  <h1 class="text-4xl font-bold text-table-header">Hello</h1>
+  <p class="text-highlight">Custom color paragraph</p>
+  <a class="bg-table-header text-white px-4 py-2 rounded hover:bg-highlight">Button</a>
+
 </body>
 </html>

tailwind.config.js

@@ -1,14 +1,22 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./*.html', './*.js'],
+  content: [
+    './*.html',
+    './**/*.html',
+    './*.js',
+    './**/*.js'
+  ],
+  safelist: [
+    'bg-table-header',
+    'text-highlight',
+  ],
   theme: {
     extend: {
       colors: {
-        'table-header': '#091a52',
-        'highlight': '#ff5733',
+        // 'table-header': '#091a52',
+        // 'highlight': '#ff5733',
       },
     },
   },
-  safelist: ['bg-table-header', 'text-highlight'],
   plugins: [],
 };

tailwind.css

@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@theme {
+  --color-table-header: #091a52;
+  --color-highlight: #ff5733;
+}