diff --git a/package.json b/package.json
new file mode 100644
index 000000000..de43c6ceb
--- /dev/null
+++ b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "geoweaver",
+  "version": "1.0.0",
+  "description": "[![CircleCI](https://circleci.com/gh/ZihengSun/Geoweaver/tree/master.svg?style=svg)](https://circleci.com/gh/ZihengSun/Geoweaver/tree/master) [![License](https://img.shields.io/github/license/ESIPFed/Geoweaver.svg)](https://github.com/ESIPFed/Geoweaver/blob/master/LICENSE) [![Stars](https://img.shields.io/github/stars/ESIPFed/Geoweaver.svg)](https://github.com/ESIPFed/Geoweaver/stargazers) [![Forks](https://img.shields.io/github/forks/ESIPFed/Geoweaver.svg)](https://github.com/ESIPFed/Geoweaver/network/members) [![Issues](https://img.shields.io/github/issues/ESIPFed/Geoweaver.svg)](https://github.com/ESIPFed/Geoweaver/issues) [![Coverage](https://img.shields.io/badge/coverage-100%25-success.svg)](https://codecov.io/)",
+  "main": "index.js",
+  "directories": {
+    "doc": "docs",
+    "lib": "lib"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:css": "tailwindcss -i ./src/main/resources/static/css/style.css -o ./src/main/resources/static/css/tailwind.css --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.1"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 000000000..33ad091d2
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index 125455be4..5ae137a67 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -1,3 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/*@import "tailwindcss/components.css";*/
+/*@import "tailwindcss/utilities.css";*/
+
 @font-face {
 	font-family: 'Raleway';
 	font-style: normal;
@@ -89,10 +95,9 @@ section {
 
 .font-default {
 	/*font-family: "Open Sans", Helvetica, Arial;*/
-	font-family: "Times New Roman", Times, serif
+	font-family: "Times New Roman", Times, serif;
 	font-weight: 200;
-	font-size: 1.6rem,
-	color: 
+	font-size: 1.6rem;
 }
 
 .font-default h1 {
diff --git a/src/main/resources/templates/fragments/head.html b/src/main/resources/templates/fragments/head.html
index 690a05ef0..6a6fc7675 100644
--- a/src/main/resources/templates/fragments/head.html
+++ b/src/main/resources/templates/fragments/head.html
@@ -151,4 +151,6 @@
 
     <script type="text/javascript" src="../js/intro.min.js"></script>
 
+    <link rel="stylesheet" href="../css/tailwind.css">
+
 </head>
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 000000000..fcfe3fc5b
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  prefix: "tw-",
+  content: [
+    "./src/main/resources/templates/**/*.html",
+    "./src/main/java/**/*.java",
+  ],
+  theme: {
+    extend: {},
+  },
+  corePlugins: {
+    preflight: false,
+  },
+  plugins: [],
+}
+