feat: setup TailwindCSS v3 (#951)

* Upgrade TailwindCSS to version 3 and update the configuration * Add TailwindCSS dependencies * Extend theme configuration
ReDI-School · Aug 16, 2024 · d128def · d128def
1 parent 173478b
commit d128def
Show file tree

Hide file tree

Showing 5 changed files with 462 additions and 258 deletions.
diff --git a/apps/redi-connect/tailwind.config.js b/apps/redi-connect/tailwind.config.js
@@ -1,30 +1,77 @@
 const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind')
 const { join } = require('path')
 
-// Configuration for TailwindCSS v2.2.16
+// Configuration for TailwindCSS v3
 module.exports = {
-  purge: [
+  content: [
     join(__dirname, './src/**/*!(*.stories|*.spec).{js,ts,jsx,tsx,html}'),
     ...createGlobPatternsForDependencies(__dirname),
   ],
   prefix: 'tw-',
-  darkMode: false,
   theme: {
-    extend: {},
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
   },
-  variants: {},
-  plugins: [],
+  plugins: [require('tailwindcss-animate')],
 }
-
-// Configuration for TailwindCSS v3
-// module.exports = {
-//   content: [
-//     join(__dirname, './src/**/*!(*.stories|*.spec).{js,ts,jsx,tsx,html}'),
-//     ...createGlobPatternsForDependencies(__dirname),
-//   ],
-//  prefix: 'tw-',
-//   theme: {
-//     extend: {},
-//   },
-//   plugins: [],
-// }
diff --git a/apps/redi-talent-pool/tailwind.config.js b/apps/redi-talent-pool/tailwind.config.js
@@ -1,30 +1,77 @@
 const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind')
 const { join } = require('path')
 
-// Configuration for TailwindCSS v2.2.16
+// Configuration for TailwindCSS v3
 module.exports = {
-  purge: [
+  content: [
     join(__dirname, './src/**/*!(*.stories|*.spec).{js,ts,jsx,tsx,html}'),
     ...createGlobPatternsForDependencies(__dirname),
   ],
   prefix: 'tw-',
-  darkMode: false,
   theme: {
-    extend: {},
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
   },
-  variants: {},
-  plugins: [],
+  plugins: [require('tailwindcss-animate')],
 }
-
-// Configuration for TailwindCSS v3
-// module.exports = {
-//   content: [
-//     join(__dirname, './src/**/*!(*.stories|*.spec).{js,ts,jsx,tsx,html}'),
-//     ...createGlobPatternsForDependencies(__dirname),
-//   ],
-//  prefix: 'tw-',
-//   theme: {
-//     extend: {},
-//   },
-//   plugins: [],
-// }
diff --git a/libs/shared-atomic-design-components/src/lib/styles/_tailwind.scss b/libs/shared-atomic-design-components/src/lib/styles/_tailwind.scss
@@ -1,3 +1,38 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 215 20.2% 65.1%;
+
+    --radius: 0.5rem;
+  }
+}
diff --git a/package.json b/package.json
@@ -82,7 +82,7 @@
     "canvas-confetti": "^1.4.0",
     "class-transformer": "^0.5.1",
     "classnames": "^2.3.1",
-    "clsx": "^1.0.4",
+    "clsx": "^2.1.1",
     "core-js": "^3.6.5",
     "cors": "^2.5.2",
     "date-fns": "^2.8.1",
@@ -184,6 +184,7 @@
     "autoprefixer": "^10.4.19",
     "babel-jest": "27.2.3",
     "babel-loader": "8.1.0",
+    "class-variance-authority": "^0.7.0",
     "css-loader": "4.3.0",
     "cypress": "^6.0.1",
     "env-cmd": "^10.1.0",
@@ -204,7 +205,9 @@
     "rimraf": "^5.0.5",
     "sass-loader": "10.1.1",
     "style-loader": "2.0.0",
-    "tailwindcss": "^2.2.19",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss": "^3.4.4",
+    "tailwindcss-animate": "^1.0.7",
     "ts-jest": "27.0.5",
     "ts-node": "~9.1.1",
     "typescript": "4.6.3",