fix: prefers media variables not work without directives.

packages/tailwind/src/plugin/index.ts

@@ -9,7 +9,7 @@ import postcssJs from 'postcss-js';
 import path from 'path';
 import { PluginConfig, PartialTheme } from './types/config.types';
 import { Theme } from './types/theme.types';
-import { createThemeVariables, excludeThemesByName } from './utils/theme';
+import { processThemeVariables, excludeThemesByName } from './utils/theme';
 import _ from 'lodash';
 import { getSelectorsWithPrefix } from './utils/prefix';
 
@@ -78,15 +78,12 @@ const config = plugin.withOptions<PluginConfig>(
               mergedTheme = _.merge(lightTheme, theme);
             }
 
-            addBase(
-              // inject some basic depended css variables
-              createThemeVariables(mergedTheme)
-            );
+            processThemeVariables(addBase, mergedTheme);
           });
         }
       }
 
-      // add base styles
+      // add preset base styles
       addBase(baseCSSObj);
 
       // add component styles

packages/tailwind/src/plugin/utils/theme.ts

@@ -6,14 +6,15 @@ import {
   createColorCssVariableMap,
 } from './variables';
 import { PartialTheme } from '../types/config.types';
+import { type PluginAPI } from 'tailwindcss/types/config';
 
 export const excludeThemesByName = (removeThemes: string[], themes: PartialTheme[]) => {
   return themes.filter((theme) => {
     return !removeThemes.includes(theme.name || '');
   });
 };
 
-export const createThemeVariables = (theme: Theme) => {
+export const processThemeVariables = (addBase: PluginAPI['addBase'], theme: Theme) => {
   const colorsCssVariableMap = {
     // make sure bw color available
     ...createBWCssVariableMap(theme.colorScheme),
@@ -48,22 +49,24 @@ export const createThemeVariables = (theme: Theme) => {
     };
   }
 
-  // return theme all relative styles
-  return {
-    ...(theme.name === 'light' && {
+  // add theme all relative styles into base layer.
+  if (theme.name === 'light') {
+    addBase({
       [':root']: {
         colorScheme: 'light',
         ...colorsCssVariableMap,
       },
       ...colorVariablesClassesMap,
-    }),
+    });
+  }
+  addBase({
     [`[data-theme=${theme.name}]`]: {
       colorScheme: theme.colorScheme || 'light',
       ...colorsCssVariableMap,
     },
-    ...themeColorVariablesClassesMap,
-    // if theme enabled prefersColorScheme param
-    ...(theme.prefersColorScheme && {
+  });
+  if (theme.prefersColorScheme) {
+    addBase({
       [`@media (prefers-color-scheme:${theme.colorScheme || 'light'})`]: {
         ...(theme.name === 'dark' && {
           [`:root`]: {
@@ -77,6 +80,18 @@ export const createThemeVariables = (theme: Theme) => {
         },
         ...colorVariablesClassesMap,
       },
-    }),
-  };
+    });
+
+    if (theme.name === 'dark') {
+      addBase({
+        [`@media (prefers-color-scheme:${theme.colorScheme || 'light'})`]: {
+          [`:root`]: {
+            colorScheme: 'dark',
+            ...colorsCssVariableMap,
+          },
+        },
+      });
+    }
+  }
+  addBase(themeColorVariablesClassesMap);
 };