TS ESM Tailwind config

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--canary.ccb9825.0",
     "@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,19 +6,16 @@
  * 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 = {
   corePlugins: {
     fontFamily: false,
@@ -57,7 +54,7 @@ module.exports = {
       },
     },
     borderRadius: {
-      none: 0,
+      none: '0',
       ...borderRadiusTokens,
     },
     colors: {
@@ -66,7 +63,7 @@ module.exports = {
     },
   },
   plugins: [
-    plugin(({ addVariant, addUtilities, variants }) => {
+    plugin(({ addVariant, addUtilities }) => {
       addVariant('children', '& > *')
       addVariant('selected', '.is-selected &')
       addVariant('disabled', ['&.visually-disabled', '&:disabled'])
@@ -78,11 +75,10 @@ module.exports = {
             },
           }))
           .reduce((p, c) => ({ ...p, ...c }), {}),
-        variants
       )
       addUtilities(textUtilities)
       addUtilities(colorUtilities)
       addUtilities(elevationUtilities)
     }),
   ],
-}
+} satisfies Config