chore: Convert tailwind config to typescript file (#2599)

* convert tailwind config to typescript file

* try design-system canary that fixes everything

* upgrade to non-canary design-system, fix import

package.json

@@ -34,7 +34,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.23",
     "@headlessui/react": "^2.1.8",
-    "@oxide/design-system": "^1.7.2",
+    "@oxide/design-system": "^1.7.3",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-focus-guards": "1.0.1",

tailwind.config.js → tailwind.config.ts

@@ -6,20 +6,17 @@
  * Copyright Oxide Computer Company
  */
 
-// @ts-check
+import { type Config } from 'tailwindcss'
+import plugin from 'tailwindcss/plugin'
 
-/** @type {import('tailwindcss/lib/util/createPlugin').default} */
-// @ts-expect-error
-const plugin = require('tailwindcss/plugin')
-const {
-  textUtilities,
-  colorUtilities,
+import {
   borderRadiusTokens,
+  colorUtilities,
   elevationUtilities,
-} = require('@oxide/design-system/styles/dist/tailwind-tokens.js')
+  textUtilities,
+} from '@oxide/design-system/styles/dist/tailwind-tokens.ts'
 
-/** @type {import('tailwindcss/tailwind-config').TailwindConfig} */
-module.exports = {
+export default {
   corePlugins: {
     fontFamily: false,
     fontSize: false,
@@ -57,7 +54,7 @@ module.exports = {
       },
     },
     borderRadius: {
-      none: 0,
+      none: '0',
       ...borderRadiusTokens,
     },
     colors: {
@@ -66,23 +63,13 @@ module.exports = {
     },
   },
   plugins: [
-    plugin(({ addVariant, addUtilities, variants }) => {
+    plugin(({ addVariant, addUtilities }) => {
       addVariant('children', '& > *')
       addVariant('selected', '.is-selected &')
       addVariant('disabled', ['&.visually-disabled', '&:disabled'])
-      addUtilities(
-        Array.from({ length: 12 }, (_, i) => i)
-          .map((i) => ({
-            [`.grid-col-${i}`]: {
-              'grid-column': `${i}`,
-            },
-          }))
-          .reduce((p, c) => ({ ...p, ...c }), {}),
-        variants
-      )
       addUtilities(textUtilities)
       addUtilities(colorUtilities)
       addUtilities(elevationUtilities)
     }),
   ],
-}
+} satisfies Config