1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

diff --git a/src/class-names/getUtilityConfigMap.js b/src/class-names/getUtilityConfigMap.js
index 26ccac72f7fc948b0145c629f967147ccabe27b6..d7aaf1fe183ba21008aab26949996eaff40066eb 100644
--- a/src/class-names/getUtilityConfigMap.js
+++ b/src/class-names/getUtilityConfigMap.js
@@ -18,7 +18,12 @@     }
   },
 })
 
-export async function getUtilityConfigMap({ cwd, resolvedConfig, postcss }) {
+export async function getUtilityConfigMap({
+  cwd,
+  resolvedConfig,
+  postcss,
+  browserslist,
+}) {
   const builtInPlugins = await getBuiltInPlugins({ cwd, resolvedConfig })
   const userPlugins = Array.isArray(resolvedConfig.plugins)
     ? resolvedConfig.plugins
@@ -31,6 +36,7 @@
     ;[...builtInPlugins, ...userPlugins].forEach((plugin) => {
       runPlugin(plugin, {
         postcss,
+        browserslist,
         config: proxiedConfig,
         addUtilities: (utilities) => {
           Object.keys(utilities).forEach((util) => {

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

diff --git a/src/class-names/getVariants.js b/src/class-names/getVariants.js
index 9688ef49a7a8b822d1275829c94d04be8d51730a..da2488e1c085fc9c6520004c49ce36559ee0febe 100644
--- a/src/class-names/getVariants.js
+++ b/src/class-names/getVariants.js
@@ -1,7 +1,12 @@
 import semver from 'semver'
 import { runPlugin } from './runPlugin'
 
-export default function getVariants({ config, version, postcss }) {
+export default function getVariants({
+  config,
+  version,
+  postcss,
+  browserslist,
+}) {
   let variants = ['responsive', 'hover']
   semver.gte(version, '0.3.0') && variants.push('focus', 'group-hover')
   semver.gte(version, '0.5.0') && variants.push('active')
@@ -16,6 +21,7 @@
   plugins.forEach((plugin) => {
     runPlugin(plugin, {
       postcss,
+      browserslist,
       config,
       addVariant: (name) => {
         variants.push(name)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

diff --git a/src/class-names/index.js b/src/class-names/index.js
index c18c93a6e32089c2d2a7dbf8d28ac6b9c93a4e36..2aaec68aa35f27c932ca91020de137f49919ecce 100644
--- a/src/class-names/index.js
+++ b/src/class-names/index.js
@@ -43,6 +43,7 @@   async function run() {
     let configPath
     let postcss
     let tailwindcss
+    let browserslist
     let version
 
     configPath = await globSingle(CONFIG_GLOB, {
@@ -57,6 +58,11 @@     const configDir = path.dirname(configPath)
     postcss = importFrom(configDir, 'postcss')
     tailwindcss = importFrom(configDir, 'tailwindcss')
     version = importFrom(configDir, 'tailwindcss/package.json').version
+
+    try {
+      // this is not required
+      browserslist = importFrom(configDir, 'browserslist')
+    } catch (_) {}
 
     const sepLocation = semver.gte(version, '0.99.0')
       ? ['separator']
@@ -103,11 +109,12 @@       separator: typeof userSeperator === 'undefined' ? ':' : userSeperator,
       classNames: await extractClassNames(ast),
       dependencies: hook.deps,
       plugins: getPlugins(config),
-      variants: getVariants({ config, version, postcss }),
+      variants: getVariants({ config, version, postcss, browserslist }),
       utilityConfigMap: await getUtilityConfigMap({
         cwd: configDir,
         resolvedConfig,
         postcss,
+        browserslist,
       }),
     }
   }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

diff --git a/src/class-names/runPlugin.js b/src/class-names/runPlugin.js
index 059b9a9c0337b279f2d55e9ec5911d365772f394..c53f4ce74fa63450f2c747841b71f7062708d8f2 100644
--- a/src/class-names/runPlugin.js
+++ b/src/class-names/runPlugin.js
@@ -1,7 +1,11 @@
 import dlv from 'dlv'
 
 export function runPlugin(plugin, params = {}) {
-  const { config, ...rest } = params
+  const { config, browserslist, ...rest } = params
+
+  const browserslistTarget =
+    browserslist && browserslist().includes('ie 11') ? 'ie11' : 'relaxed'
+
   try {
     ;(plugin.handler || plugin)({
       addUtilities: () => {},
@@ -13,6 +17,16 @@       prefix: (x) => x,
       theme: (path, defaultValue) => dlv(config, `theme.${path}`, defaultValue),
       variants: () => [],
       config: (path, defaultValue) => dlv(config, path, defaultValue),
+      target: (path) => {
+        if (typeof config.target === 'string') {
+          return config.target === 'browserslist'
+            ? browserslistTarget
+            : config.target
+        }
+        const [defaultTarget, targetOverrides] = dlv(config, 'target')
+        const target = dlv(targetOverrides, path, defaultTarget)
+        return target === 'browserslist' ? browserslistTarget : target
+      },
       ...rest,
     })
   } catch (_) {}