diff --git a/package.json b/package.json
index 128b51d5c1..24283735e5 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
         "@babel/eslint-parser": "^7.15.8",
         "@babel/preset-env": "^7.23.9",
         "accounting": "^0.4.1",
+        "autoprefixer": "^10.4.20",
         "babel-plugin-istanbul": "^6.1.1",
         "chartjs-plugin-colorschemes": "^0.4.0",
         "cross-env": "^7.0.3",
@@ -38,9 +39,11 @@
         "laravel-mix": "^6.0.49",
         "moment": "^2.30.1",
         "moment-timezone": "^0.5.45",
+        "postcss": "^8.4.45",
         "resolve-url-loader": "^3.1.2",
         "sass": "^1.77.4",
         "sass-loader": "^12.6.0",
+        "tailwindcss": "^3.4.10",
         "vue-loader": "^15.10.0"
     },
     "dependencies": {
@@ -60,7 +63,6 @@
         "@processmaker/vue-form-elements": "0.59.0",
         "@processmaker/vue-multiselect": "2.3.0",
         "@tinymce/tinymce-vue": "2.0.0",
-        "autoprefixer": "10.4.5",
         "axios": "^0.27.2",
         "bootstrap": "^4.5.3",
         "bootstrap-vue": "^2.18.1",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000000..33ad091d26
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/resources/sass/tailwind.css b/resources/sass/tailwind.css
new file mode 100644
index 0000000000..e66e36037c
--- /dev/null
+++ b/resources/sass/tailwind.css
@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    a{
+      color: #0872C2;
+    }
+  }
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000000..170eca4655
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  prefix: "tw-",
+  content: [
+    "./resources/**/*.blade.php",
+    "./resources/**/*.js",
+    "./resources/**/*.vue",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  safelist: [
+    {
+      pattern: /(bg|outline|border|text)-(gray|purple|blue|amber|green|gray)-(100|200|300|400|500)/,
+      variants: ["hover"],
+    },
+  ],
+};
diff --git a/webpack.mix.js b/webpack.mix.js
index 66f88e3053..34d8ca2839 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -169,6 +169,9 @@ mix
   .sass("resources/sass/sidebar/sidebar.scss", "public/css")
   .sass("resources/sass/app.scss", "public/css")
   .sass("resources/sass/admin/queues.scss", "public/css/admin")
+  .postCss("resources/sass/tailwind.css", "public/css", [
+    require("tailwindcss"),
+  ])
   .version();
 
 mix.vue({ version: 2 });