Convert Tailwind config to TypeScript

.eslintrc.cjs

@@ -61,7 +61,7 @@ module.exports = {
       'URLSearchParams', // core-js
     ],
     tailwindcss: {
-      config: 'tailwind.config.cjs',
+      config: 'tailwind.config.ts',
     },
   },
 
@@ -268,7 +268,7 @@ module.exports = {
       'error',
       {
         classRegex: '^(base|container|icon|item|list|outer|wrapper)?[c|C]lass(Name)?$',
-        config: 'tailwind.config.cjs',
+        config: 'tailwind.config.ts',
       },
     ],
     'tailwindcss/migration-from-tailwind-2': 'error',

tailwind.config.ts

@@ -1,7 +1,11 @@
-const { parseColorMatrix } = require('./tailwind/colors.cjs');
+import aspectRatioPlugin from '@tailwindcss/aspect-ratio';
+import formsPlugin from '@tailwindcss/forms';
+import typographyPlugin from '@tailwindcss/typography';
+import { type Config } from 'tailwindcss';
 
-/** @type {import('tailwindcss').Config} */
-module.exports = {
+import { parseColorMatrix } from './tailwind/colors';
+
+const config: Config = {
   content: ['./src/**/*.{html,js,ts,tsx}', './custom/instance/**/*.html', './index.html'],
   darkMode: 'class',
   theme: {
@@ -98,8 +102,10 @@ module.exports = {
     },
   },
   plugins: [
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
-    require('@tailwindcss/aspect-ratio'),
+    aspectRatioPlugin,
+    formsPlugin,
+    typographyPlugin,
   ],
 };
+
+export default config;

tailwind/colors.cjs

@@ -1,46 +0,0 @@
-// https://tailwindcss.com/docs/customizing-colors#using-css-variables
-function withOpacityValue(variable) {
-  return ({ opacityValue }) => {
-    if (opacityValue === undefined) {
-      return `rgb(var(${variable}))`;
-    }
-    return `rgb(var(${variable}) / ${opacityValue})`;
-  };
-}
-
-// Parse a single color as a CSS variable
-const toColorVariable = (colorName, tint = null) => {
-  const suffix = tint ? `-${tint}` : '';
-  const variable = `--color-${colorName}${suffix}`;
-
-  return withOpacityValue(variable);
-};
-
-// Parse list of tints into Tailwind function with CSS variables
-const parseTints = (colorName, tints) => {
-  return tints.reduce((colorObj, tint) => {
-    colorObj[tint] = toColorVariable(colorName, tint);
-    return colorObj;
-  }, {});
-};
-
-// Parse color matrix into Tailwind color palette
-const parseColorMatrix = colorMatrix => {
-  return Object.entries(colorMatrix).reduce((palette, colorData) => {
-    const [colorName, tints] = colorData;
-
-    // Conditionally parse array or single-tint colors
-    if (Array.isArray(tints)) {
-      palette[colorName] = parseTints(colorName, tints);
-    } else if (tints === true) {
-      palette[colorName] = toColorVariable(colorName);
-    }
-
-    return palette;
-  }, {});
-};
-
-module.exports = {
-  withOpacityValue,
-  parseColorMatrix,
-};

tailwind/colors.test.ts

@@ -1,7 +1,7 @@
 import {
   withOpacityValue,
   parseColorMatrix,
-} from './colors.cjs';
+} from './colors';
 
 describe('withOpacityValue()', () => {
   it('returns a Tailwind color function with alpha support', () => {
@@ -11,8 +11,7 @@ describe('withOpacityValue()', () => {
     expect(typeof result).toBe('function');
 
     // Test calling the function
-    expect(result({})).toBe('rgb(var(--color-primary-500))');
-    expect(result({ opacityValue: .5 })).toBe('rgb(var(--color-primary-500) / 0.5)');
+    expect(result).toBe('rgb(var(--color-primary-500) / <alpha-value>)');
   });
 });
 
@@ -29,8 +28,8 @@ describe('parseColorMatrix()', () => {
     const result = parseColorMatrix(colorMatrix);
 
     // Colors are mapped to functions which return CSS values
-    expect(result.primary[500]({})).toEqual('rgb(var(--color-primary-500))');
-    expect(result.accent[300]({ opacityValue: .3 })).toEqual('rgb(var(--color-accent-300) / 0.3)');
+    // @ts-ignore
+    expect(result.accent['300']).toEqual('rgb(var(--color-accent-300) / <alpha-value>)');
   });
 
   it('parses single-tint values', () => {
@@ -46,6 +45,6 @@ describe('parseColorMatrix()', () => {
 
     const result = parseColorMatrix(colorMatrix);
 
-    expect(result['gradient-start']({ opacityValue: .7 })).toEqual('rgb(var(--color-gradient-start) / 0.7)');
+    expect(result['gradient-start']).toEqual('rgb(var(--color-gradient-start) / <alpha-value>)');
   });
 });

tailwind/colors.ts

@@ -0,0 +1,47 @@
+import { type RecursiveKeyValuePair } from 'tailwindcss/types/config';
+
+/** https://tailwindcss.com/docs/customizing-colors#using-css-variables */
+function withOpacityValue(variable: string): string {
+  return `rgb(var(${variable}) / <alpha-value>)`;
+}
+
+/** Parse a single color as a CSS variable. */
+const toColorVariable = (colorName: string, tint: number | null = null): string => {
+  const suffix = tint ? `-${tint}` : '';
+  const variable = `--color-${colorName}${suffix}`;
+
+  return withOpacityValue(variable);
+};
+
+/** Parse list of tints into Tailwind function with CSS variables. */
+const parseTints = (colorName: string, tints: number[]): RecursiveKeyValuePair => {
+  return tints.reduce<Record<string, string>>((colorObj, tint) => {
+    colorObj[tint] = toColorVariable(colorName, tint);
+    return colorObj;
+  }, {});
+};
+
+interface ColorMatrix {
+  [colorName: string]: number[] | boolean;
+}
+
+/** Parse color matrix into Tailwind color palette. */
+const parseColorMatrix = (colorMatrix: ColorMatrix): RecursiveKeyValuePair => {
+  return Object.entries(colorMatrix).reduce<RecursiveKeyValuePair>((palette, colorData) => {
+    const [colorName, tints] = colorData;
+
+    // Conditionally parse array or single-tint colors
+    if (Array.isArray(tints)) {
+      palette[colorName] = parseTints(colorName, tints);
+    } else if (tints === true) {
+      palette[colorName] = toColorVariable(colorName);
+    }
+
+    return palette;
+  }, {});
+};
+
+export {
+  withOpacityValue,
+  parseColorMatrix,
+};