Configure Tailwind CSS

iamlogand · Oct 4, 2023 · c14a6cc · c14a6cc
1 parent 0432a44
commit c14a6cc
Show file tree

Hide file tree

Showing 5 changed files with 245 additions and 6 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -45,6 +45,8 @@
     "@types/chroma-js": "^2.4.0",
     "@types/js-cookie": "^3.0.3",
     "@types/react-virtualized": "^9.21.22",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
     "source-map-support": "^0.5.21",
     "tailwindcss": "^3.3.3"
   }

diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/frontend/styles/master.css b/frontend/styles/master.css
@@ -1,3 +1,8 @@
+/* Tailwind CSS directives */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html,
 body {
   height: 100%;

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+
+  // Disable Tailwind CSS's preflight style so Material UI's preflight styles can be used instead
+  corePlugins: {
+    preflight: false,
+  },
+}