diff --git a/src/index.tsx b/src/index.tsx
index c75339c..a4778c5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -92,19 +92,24 @@ function makeComponent(baseName: string, rootDef: TagDef, rootProps: Record<stri
   }
 }
 
+// ensures 'hover' is ':hover'
+function stateName(state: string): string {
+  return state.startsWith(':') ? state : `:${state}`
+}
+
 // adds CSS styles for tag definition
 function registerStyles(name: string, def: TagDef) {
   const rootClassName = makeClassName(name)
   styles[rootClassName] ??= makeStyle(def)
 
   for (const [state, style] of Object.entries(def.states ?? {}))
-    styles[`${rootClassName}${state}`] = makeStyle(style)
+    styles[`${rootClassName}${stateName(state)}`] = makeStyle(style)
 
   for (const [partName, partDef] of Object.entries(def.parts ?? {})) {
     const partClassName = makeClassName(name, partName)
     styles[partClassName] ??= makeStyle(partDef)
     for (const [state, style] of Object.entries(partDef.states ?? {}))
-      styles[`${partClassName}${state}`] = makeStyle(style)
+      styles[`${partClassName}${stateName(state)}`] = makeStyle(style)
 
   }
 
@@ -121,14 +126,14 @@ function registerStyles(name: string, def: TagDef) {
       const className = `${baseClassName}.${variantName}`
       styles[className] ??= makeStyle(variantDef)
       for (const [state, style] of Object.entries(variantDef.states ?? {}))
-        styles[`${className}${state}`] = makeStyle(style)
+        styles[`${className}${stateName(state)}`] = makeStyle(style)
 
       for (const [partName, partDef] of Object.entries(variantDef.parts ?? {})) {
         const basePartClassName = makeClassName(name, partName)
         const partClassName = `${basePartClassName}.${variantName}`
         styles[partClassName] ??= makeStyle(partDef)
         for (const [state, style] of Object.entries(partDef.states ?? {}))
-          styles[`${partClassName}${state}`] = makeStyle(style)
+          styles[`${partClassName}${stateName(state)}`] = makeStyle(style)
       }
     } else {
       // Keyed variant - iterate over the keys
@@ -136,13 +141,13 @@ function registerStyles(name: string, def: TagDef) {
         const className = makeClassName(name, undefined, variantName, variantKey)
         styles[className] ??= makeStyle(variantDef)
         for (const [state, style] of Object.entries(variantDef.states ?? {}))
-          styles[`${className}${state}`] = makeStyle(style)
+          styles[`${className}${stateName(state)}`] = makeStyle(style)
 
         for (const [partName, partDef] of Object.entries(variantDef.parts ?? {})) {
           const partClassName = makeClassName(name, partName, variantName, variantKey)
           styles[partClassName] ??= makeStyle(partDef)
           for (const [state, style] of Object.entries(partDef.states ?? {}))
-            styles[`${partClassName}${state}`] = makeStyle(style)
+            styles[`${partClassName}${stateName(state)}`] = makeStyle(style)
         }
       }
     }