@mertasan/tailwindcss-variables - npm Package Compare versions

Comparing version 1.3.3 to 2.0.0

__tests__/color-variable-helper2.test.html

+<div class="bg-indigo-400">tailwindcss-variables</div>
+<div class="bg-indigo-500">tailwindcss-variables</div>
+<div class="bg-indigo-600">tailwindcss-variables</div>
+
+<div class="text-indigo-400">tailwindcss-variables</div>
+<div class="text-indigo-500">tailwindcss-variables</div>
+<div class="text-indigo-600">tailwindcss-variables</div>

.github/FUNDING.yml

+# These are supported funding model platforms
+
+patreon: mertasan

__tests__/basic-usage.test.js

@@ -7,3 +7,3 @@ const tailwindcssVariables = require('../src/index')
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: false,
@@ -17,2 +17,3 @@ theme: {
             },
+
             sizes: {
@@ -24,2 +25,3 @@ small: '10px',
           },
+
           '.container': {
@@ -33,4 +35,5 @@ colors: {
       },
+
       plugins: [tailwindcssVariables],
-    }),
+    })
   ).toMatchInlineSnapshot(`
@@ -47,3 +50,2 @@ "
       + }
-      +
       + .container {
@@ -50,0 +52,0 @@ +   --colors-primary: red;

__tests__/color-variable-helper.test.html

@@ -14,1 +14,9 @@ <div class="text-primary text-opacity-50">tailwindcss-variables</div>
 <div class="bg-gradient-to-r from-red-600 to-transparent"></div>
+
+<div class="bg-indigo-400">tailwindcss-variables</div>
+<div class="bg-indigo-500">tailwindcss-variables</div>
+<div class="bg-indigo-600">tailwindcss-variables</div>
+
+<div class="text-indigo-400">tailwindcss-variables</div>
+<div class="text-indigo-500">tailwindcss-variables</div>
+<div class="text-indigo-600">tailwindcss-variables</div>

__tests__/color-variable-helper.test.js

@@ -9,6 +9,3 @@ const tailwindcssVariables = require('../src/index')
       corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
-      purge: {
-        enabled: true,
-        content: [utils.content()],
-      },
+      content: [utils.content()],
       darkMode: false,
@@ -45,2 +42,3 @@ theme: {
               },
+
               green: 'rgb(0,255,0)',
@@ -52,2 +50,3 @@ yellow: {
             },
+
             sizes: {
@@ -61,2 +60,3 @@ small: '10px',
       },
+
       plugins: [
@@ -95,3 +95,34 @@ tailwindcssVariables({
       + }
-      +
+      + .bg-secondary {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
+      + }
+      + .bg-gray {
+      +   background-color: var(--colors-gray)
+      + }
+      + .bg-red-400 {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))
+      + }
+      + .bg-red-500 {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity))
+      + }
+      + .bg-red-600 {
+      +   background-color: var(--colors-red-500)
+      + }
+      + .bg-green {
+      +   background-color: var(--colors-green)
+      + }
+      + .bg-white {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+      + }
+      + .bg-yellow {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-yellow-rgb), var(--tw-bg-opacity))
+      + }
+      + .bg-opacity-50 {
+      +   --tw-bg-opacity: 0.5
+      + }
       + .text-primary {
@@ -101,3 +132,2 @@ +   --tw-text-opacity: 1;
       + }
-      +
       + .text-blue {
@@ -107,46 +137,152 @@ +   --tw-text-opacity: 1;
       + }
-      +
       + .text-opacity-50 {
       +   --tw-text-opacity: 0.5
       + }
-      +
-      + .bg-secondary {
+
+    "
+  `)
+})
+
+test('colorVariable - background and text color', async () => {
+  expect(
+    await utils.diffOnly({
+      corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
+      content: [utils.content()],
+      darkMode: false,
+      theme: {
+        screens: false,
+        colors: {
+          indigo: {
+            400: colorVariable('var(--colors-indigo-400)', true), // RGBA
+            500: colorVariable('var(--colors-indigo-500)', true), // RGBA
+            600: colorVariable('var(--colors-indigo-600)', true), // HEX
+          },
+        },
+
+        variables: {
+          DEFAULT: {
+            colors: {
+              indigo: {
+                400: 'rgba(254,0,0,1)',
+                500: 'rgba(254,0,0,0.5)',
+                600: '#a20606',
+              },
+            },
+          },
+        },
+
+        plugins: [
+          tailwindcssVariables({
+            colorVariables: true,
+            forceRGB: true,
+          }),
+        ],
+      },
+    })
+  ).toMatchInlineSnapshot(`
+    "
+
+      
+      + .bg-indigo-400 {
       +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
+      +   background-color: rgba(var(--colors-indigo-400), var(--tw-bg-opacity))
       + }
-      +
-      + .bg-white {
+      + .bg-indigo-500 {
       +   --tw-bg-opacity: 1;
-      +   background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
+      +   background-color: rgba(var(--colors-indigo-500), var(--tw-bg-opacity))
       + }
-      +
-      + .bg-yellow {
+      + .bg-indigo-600 {
       +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-yellow-rgb), var(--tw-bg-opacity))
+      +   background-color: rgba(var(--colors-indigo-600), var(--tw-bg-opacity))
       + }
-      +
-      + .bg-red-400 {
+      + .bg-opacity-50 {
+      +   --tw-bg-opacity: 0.5
+      + }
+      + .text-indigo-400 {
+      +   --tw-text-opacity: 1;
+      +   color: rgba(var(--colors-indigo-400), var(--tw-text-opacity))
+      + }
+      + .text-indigo-500 {
+      +   --tw-text-opacity: 1;
+      +   color: rgba(var(--colors-indigo-500), var(--tw-text-opacity))
+      + }
+      + .text-indigo-600 {
+      +   --tw-text-opacity: 1;
+      +   color: rgba(var(--colors-indigo-600), var(--tw-text-opacity))
+      + }
+      + .text-opacity-50 {
+      +   --tw-text-opacity: 0.5
+      + }
+
+    "
+  `)
+})
+
+/**
+ * a --tw-bg-opacity must be added to the colors even if the bg-opacity-100 class is not present.
+ */
+test('colorVariable - background and text color 2', async () => {
+  expect(
+    await utils.diffOnly({
+      corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
+      content: [utils.content('color-variable-helper2')],
+
+      darkMode: false,
+      theme: {
+        screens: false,
+        colors: {
+          indigo: {
+            400: colorVariable('var(--colors-indigo-400)', true), // RGBA
+            500: colorVariable('var(--colors-indigo-500)', true), // RGBA
+            600: colorVariable('var(--colors-indigo-600)', true), // HEX
+          },
+        },
+
+        variables: {
+          DEFAULT: {
+            colors: {
+              indigo: {
+                400: 'rgba(254,0,0,1)',
+                500: 'rgba(254,0,0,0.5)',
+                600: '#a20606',
+              },
+            },
+          },
+        },
+
+        plugins: [
+          tailwindcssVariables({
+            colorVariables: true,
+            forceRGB: true,
+          }),
+        ],
+      },
+    })
+  ).toMatchInlineSnapshot(`
+    "
+
+      
+      + .bg-indigo-400 {
       +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))
+      +   background-color: rgba(var(--colors-indigo-400), var(--tw-bg-opacity))
       + }
-      +
-      + .bg-red-500 {
+      + .bg-indigo-500 {
       +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-red-500-rgb), var(--tw-bg-opacity))
+      +   background-color: rgba(var(--colors-indigo-500), var(--tw-bg-opacity))
       + }
-      +
-      + .bg-red-600 {
-      +   background-color: var(--colors-red-500)
+      + .bg-indigo-600 {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-indigo-600), var(--tw-bg-opacity))
       + }
-      +
-      + .bg-gray {
-      +   background-color: var(--colors-gray)
+      + .text-indigo-400 {
+      +   --tw-text-opacity: 1;
+      +   color: rgba(var(--colors-indigo-400), var(--tw-text-opacity))
       + }
-      +
-      + .bg-green {
-      +   background-color: var(--colors-green)
+      + .text-indigo-500 {
+      +   --tw-text-opacity: 1;
+      +   color: rgba(var(--colors-indigo-500), var(--tw-text-opacity))
       + }
-      +
-      + .bg-opacity-50 {
-      +   --tw-bg-opacity: 0.5
+      + .text-indigo-600 {
+      +   --tw-text-opacity: 1;
+      +   color: rgba(var(--colors-indigo-600), var(--tw-text-opacity))
       + }
@@ -162,6 +298,3 @@
       corePlugins: ['textColor', 'textOpacity', 'gradientColorStops'],
-      purge: {
-        enabled: true,
-        content: [utils.content()],
-      },
+      content: [utils.content()],
 
@@ -210,7 +343,2 @@ darkMode: false,
       + }
-      +
-      + .text-opacity-50 {
-      +   --tw-text-opacity: 0.5
-      + }
-      +
       + .from-red-400 {
@@ -220,3 +348,2 @@ +   --tw-gradient-from: rgb(var(--colors-red-400-rgb));
       + }
-      +
       + .from-red-500 {
@@ -226,3 +353,2 @@ +   --tw-gradient-from: rgb(var(--colors-red-500-rgb));
       + }
-      +
       + .from-red-600 {
@@ -232,2 +358,5 @@ +   --tw-gradient-from: rgb(var(--colors-red-600-rgb));
       + }
+      + .text-opacity-50 {
+      +   --tw-text-opacity: 0.5
+      + }
 
@@ -242,6 +371,3 @@ "
       corePlugins: ['textColor', 'textOpacity', 'gradientColorStops'],
-      purge: {
-        enabled: true,
-        content: [utils.content()],
-      },
+      content: [utils.content()],
 
@@ -288,7 +414,2 @@ darkMode: false,
       + }
-      +
-      + .text-opacity-50 {
-      +   --tw-text-opacity: 0.5
-      + }
-      +
       + .from-red-400 {
@@ -298,3 +419,2 @@ +   --tw-gradient-from: rgb(var(--colors-red-400));
       + }
-      +
       + .from-red-500 {
@@ -304,3 +424,2 @@ +   --tw-gradient-from: rgb(var(--colors-red-500));
       + }
-      +
       + .from-red-600 {
@@ -310,2 +429,5 @@ +   --tw-gradient-from: rgb(var(--colors-red-600));
       + }
+      + .text-opacity-50 {
+      +   --tw-text-opacity: 0.5
+      + }
 
@@ -312,0 +434,0 @@ "

__tests__/css-selectors.test.js

@@ -7,3 +7,3 @@ const tailwindcssVariables = require('../src/index')
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: false,
@@ -18,2 +18,3 @@ theme: {
           },
+
           'input[type="text"]': {
@@ -25,2 +26,3 @@ colors: {
           },
+
           '.container': {
@@ -31,2 +33,3 @@ sizes: {
           },
+
           '.container.card': {
@@ -37,2 +40,3 @@ sizes: {
           },
+
           '*,\n*::before,\n*::after': {
@@ -43,3 +47,4 @@ hello: {
           },
-          '[type=\'button\'],\n[type=\'reset\']': {
+
+          "[type='button'],\n[type='reset']": {
             colors: {
@@ -52,4 +57,5 @@ primary: 'blue',
       },
+
       plugins: [tailwindcssVariables],
-    }),
+    })
   ).toMatchInlineSnapshot(`
@@ -63,3 +69,2 @@ "
       + }
-      +
       + input[type='text'] {
@@ -69,11 +74,8 @@ +   --colors-primary: red;
       + }
-      +
       + .container {
       +   --sizes-medium: 3rem
       + }
-      +
       + .container.card {
       +   --sizes-medium: 4rem
       + }
-      +
       + *,
@@ -84,3 +86,2 @@ + *::before,
       + }
-      +
       + [type='button'],
@@ -87,0 +88,0 @@ + [type='reset'] {

__tests__/dark-mode.test.js

@@ -7,3 +7,7 @@ const tailwindcssVariables = require('../src/index')
     await utils.diffOnly({
-      purge: [utils.content()],
+      purge: {
+        enabled: true,
+        content: [utils.content()],
+      },
+
       darkMode: 'class',
@@ -17,2 +21,3 @@ theme: {
           },
+
           '.container': {
@@ -25,4 +30,5 @@ colors: {
       },
+
       plugins: [tailwindcssVariables()],
-    }),
+    })
   ).toMatchInlineSnapshot(`
@@ -35,3 +41,2 @@ "
       + }
-      +
       + :root.dark .container {
@@ -48,3 +53,3 @@ +   --colors-secondary: #000000
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'media',
@@ -58,2 +63,3 @@ theme: {
           },
+
           '.container': {
@@ -66,4 +72,5 @@ colors: {
       },
+
       plugins: [tailwindcssVariables()],
-    }),
+    })
   ).toMatchInlineSnapshot(`
@@ -75,7 +82,6 @@ "
       +   :root {
-      +     --colors-primary: #ffffff
+      +       --colors-primary: #ffffff
       +   }
-      +
       +   .container {
-      +     --colors-secondary: #000000
+      +       --colors-secondary: #000000
       +   }
@@ -91,3 +97,3 @@ + }
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'media',
@@ -101,2 +107,3 @@ theme: {
           },
+
           '.container': {
@@ -109,2 +116,3 @@ colors: {
       },
+
       plugins: [
@@ -116,3 +124,3 @@ tailwindcssVariables({
       ],
-    }),
+    })
   ).toMatchInlineSnapshot(`
@@ -124,7 +132,6 @@ "
       +   :root {
-      +     --colors-primary: #ffffff
+      +       --colors-primary: #ffffff
       +   }
-      +
       +   .container {
-      +     --colors-secondary: #000000
+      +       --colors-secondary: #000000
       +   }
@@ -140,3 +147,3 @@ + }
     await utils.diffOnly({
-      purge: [utils.content('dark-mode-to-root')],
+      content: [utils.content('dark-mode-to-root')],
       darkMode: 'class',
@@ -150,2 +157,3 @@ theme: {
           },
+
           '.container': {
@@ -158,2 +166,3 @@ colors: {
       },
+
       plugins: [
@@ -164,3 +173,3 @@ tailwindcssVariables({
       ],
-    }),
+    })
   ).toMatchInlineSnapshot(`
@@ -173,3 +182,2 @@ "
       + }
-      +
       + :root.dark .container {
@@ -186,3 +194,3 @@ +   --colors-secondary: #000000
     await utils.diffOnly({
-      purge: [utils.content('dark-mode-to-root')],
+      content: [utils.content('dark-mode-to-root')],
       darkMode: 'class',
@@ -196,2 +204,3 @@ theme: {
           },
+
           '.container': {
@@ -204,2 +213,3 @@ colors: {
       },
+
       plugins: [
@@ -212,3 +222,3 @@ tailwindcssVariables({
       ],
-    }),
+    })
   ).toMatchInlineSnapshot(`
@@ -221,3 +231,2 @@ "
       + }
-      +
       + :root.custom-dark-selector .container {
@@ -234,3 +243,3 @@ +   --my-prefix-colors-secondary: #000000
     await utils.diffOnly({
-      purge: [utils.content('dark-mode-to-root')],
+      content: [utils.content('dark-mode-to-root')],
       darkMode: 'media',
@@ -244,2 +253,3 @@ theme: {
           },
+
           '.container': {
@@ -252,2 +262,3 @@ colors: {
       },
+
       plugins: [
@@ -258,3 +269,3 @@ tailwindcssVariables({
       ],
-    }),
+    })
   ).toMatchInlineSnapshot(`
@@ -266,7 +277,6 @@ "
       +   :root {
-      +     --my-prefix-colors-primary: #ffffff
+      +       --my-prefix-colors-primary: #ffffff
       +   }
-      +
       +   .container {
-      +     --my-prefix-colors-secondary: #000000
+      +       --my-prefix-colors-secondary: #000000
       +   }
@@ -282,3 +292,3 @@ + }
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'class',
@@ -292,2 +302,3 @@ theme: {
           },
+
           '.container': {
@@ -299,2 +310,3 @@ colors: {
         },
+
         darkVariables: {
@@ -306,2 +318,3 @@ DEFAULT: {
           },
+
           '.container': {
@@ -314,4 +327,5 @@ colors: {
       },
+
       plugins: [tailwindcssVariables()],
-    }),
+    })
   ).toMatchInlineSnapshot(`
@@ -324,11 +338,8 @@ "
       + }
-      +
       + .container {
       +   --colors-secondary: #000000
       + }
-      +
       + :root.dark {
       +   --colors-primary: #ffffff
       + }
-      +
       + :root.dark .container {
@@ -345,3 +356,3 @@ +   --colors-secondary: #000000
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'media',
@@ -355,2 +366,3 @@ theme: {
           },
+
           '.container': {
@@ -362,2 +374,3 @@ colors: {
         },
+
         darkVariables: {
@@ -369,2 +382,3 @@ DEFAULT: {
           },
+
           '.container': {
@@ -377,4 +391,5 @@ colors: {
       },
+
       plugins: [tailwindcssVariables()],
-    }),
+    })
   ).toMatchInlineSnapshot(`
@@ -387,14 +402,11 @@ "
       + }
-      +
       + .container {
       +   --colors-secondary: #000000
       + }
-      +
       + @media (prefers-color-scheme: dark) {
       +   :root {
-      +     --colors-primary: #ffffff
+      +       --colors-primary: #ffffff
       +   }
-      +
       +   .container {
-      +     --colors-secondary: #000000
+      +       --colors-secondary: #000000
       +   }
@@ -410,3 +422,3 @@ + }
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'class',
@@ -420,2 +432,3 @@ theme: {
           },
+
           '.container': {
@@ -427,2 +440,3 @@ colors: {
         },
+
         darkVariables: {
@@ -434,2 +448,3 @@ DEFAULT: {
           },
+
           '.container': {
@@ -442,2 +457,3 @@ colors: {
       },
+
       plugins: [
@@ -448,3 +464,3 @@ tailwindcssVariables({
       ],
-    }),
+    })
   ).toMatchInlineSnapshot(`
@@ -457,11 +473,8 @@ "
       + }
-      +
       + .container {
       +   --colors-secondary: #000000
       + }
-      +
       + :root.custom-dark-selector {
       +   --colors-primary: #ffffff
       + }
-      +
       + :root.custom-dark-selector .container {
@@ -478,3 +491,3 @@ +   --colors-secondary: #000000
     await utils.diffOnly({
-      purge: [utils.content('dark-mode-to-root')],
+      content: [utils.content('dark-mode-to-root')],
       darkMode: 'class',
@@ -488,2 +501,3 @@ theme: {
           },
+
           '.container': {
@@ -495,2 +509,3 @@ colors: {
         },
+
         darkVariables: {
@@ -502,2 +517,3 @@ DEFAULT: {
           },
+
           '.container': {
@@ -510,2 +526,3 @@ colors: {
       },
+
       plugins: [
@@ -516,3 +533,3 @@ tailwindcssVariables({
       ],
-    }),
+    })
   ).toMatchInlineSnapshot(`
@@ -525,11 +542,8 @@ "
       + }
-      +
       + .container {
       +   --colors-secondary: #000000
       + }
-      +
       + :root.dark {
       +   --colors-primary: #ffffff
       + }
-      +
       + :root.dark .container {
@@ -546,3 +560,3 @@ +   --colors-secondary: #000000
     await utils.diffOnly({
-      purge: [utils.content('dark-mode-to-root')],
+      content: [utils.content('dark-mode-to-root')],
       darkMode: 'class',
@@ -556,2 +570,3 @@ theme: {
           },
+
           '.container': {
@@ -563,2 +578,3 @@ colors: {
         },
+
         darkVariables: {
@@ -570,2 +586,3 @@ DEFAULT: {
           },
+
           '.container': {
@@ -578,2 +595,3 @@ colors: {
       },
+
       plugins: [
@@ -586,3 +604,3 @@ tailwindcssVariables({
       ],
-    }),
+    })
   ).toMatchInlineSnapshot(`
@@ -595,11 +613,8 @@ "
       + }
-      +
       + .container {
       +   --my-prefix-colors-secondary: #000000
       + }
-      +
       + :root.custom-dark-selector {
       +   --my-prefix-colors-primary: #ffffff
       + }
-      +
       + :root.custom-dark-selector .container {
@@ -606,0 +621,0 @@ +   --my-prefix-colors-secondary: #000000

__tests__/extend-colors.test.js

@@ -8,7 +8,3 @@ const tailwindcssVariables = require('../src/index')
       corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
-      purge: {
-        enabled: true,
-        content: [utils.content()],
-      },
-
+      content: [utils.content()],
       darkMode: false,
@@ -78,40 +74,6 @@ theme: {
       + }
-      +
-      + .text-red-400 {
-      +   --tw-text-opacity: 1;
-      +   color: rgba(var(--colors-red-400-rgb), var(--tw-text-opacity))
+      + .bg-red {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-red-rgb), var(--tw-bg-opacity))
       + }
-      +
-      + .text-red-500 {
-      +   --tw-text-opacity: 1;
-      +   color: rgba(var(--colors-red-500-rgb), var(--tw-text-opacity))
-      + }
-      +
-      + .text-red-600 {
-      +   color: var(--colors-red-600)
-      + }
-      +
-      + .text-red-700 {
-      +   color: var(--colors-red-700)
-      + }
-      +
-      + .text-red {
-      +   --tw-text-opacity: 1;
-      +   color: rgba(var(--colors-red-rgb), var(--tw-text-opacity))
-      + }
-      +
-      + .text-black {
-      +   --tw-text-opacity: 1;
-      +   color: rgba(0, 0, 0, var(--tw-text-opacity))
-      + }
-      +
-      + .text-white {
-      +   --tw-text-opacity: 1;
-      +   color: rgba(var(--colors-white-rgb), var(--tw-text-opacity))
-      + }
-      +
-      + .text-opacity-50 {
-      +   --tw-text-opacity: 0.5
-      + }
-      +
       + .bg-red-400 {
@@ -121,3 +83,2 @@ +   --tw-bg-opacity: 1;
       + }
-      +
       + .bg-red-500 {
@@ -127,29 +88,48 @@ +   --tw-bg-opacity: 1;
       + }
-      +
       + .bg-red-600 {
       +   background-color: var(--colors-red-600)
       + }
-      +
       + .bg-red-700 {
       +   background-color: var(--colors-red-700)
       + }
-      +
-      + .bg-red {
+      + .bg-white {
       +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-red-rgb), var(--tw-bg-opacity))
+      +   background-color: rgba(var(--colors-white-rgb), var(--tw-bg-opacity))
       + }
-      +
       + .bg-black {
       +   --tw-bg-opacity: 1;
-      +   background-color: rgba(0, 0, 0, var(--tw-bg-opacity))
+      +   background-color: rgb(0 0 0 / var(--tw-bg-opacity))
       + }
-      +
-      + .bg-white {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-white-rgb), var(--tw-bg-opacity))
-      + }
-      +
       + .bg-opacity-50 {
       +   --tw-bg-opacity: 0.5
       + }
+      + .text-red {
+      +   --tw-text-opacity: 1;
+      +   color: rgba(var(--colors-red-rgb), var(--tw-text-opacity))
+      + }
+      + .text-red-400 {
+      +   --tw-text-opacity: 1;
+      +   color: rgba(var(--colors-red-400-rgb), var(--tw-text-opacity))
+      + }
+      + .text-red-500 {
+      +   --tw-text-opacity: 1;
+      +   color: rgba(var(--colors-red-500-rgb), var(--tw-text-opacity))
+      + }
+      + .text-red-600 {
+      +   color: var(--colors-red-600)
+      + }
+      + .text-red-700 {
+      +   color: var(--colors-red-700)
+      + }
+      + .text-white {
+      +   --tw-text-opacity: 1;
+      +   color: rgba(var(--colors-white-rgb), var(--tw-text-opacity))
+      + }
+      + .text-black {
+      +   --tw-text-opacity: 1;
+      +   color: rgb(0 0 0 / var(--tw-text-opacity))
+      + }
+      + .text-opacity-50 {
+      +   --tw-text-opacity: 0.5
+      + }
 
@@ -178,2 +158,3 @@ "
         },
+
         variables: {
@@ -228,40 +209,6 @@ DEFAULT: {
       + }
-      +
-      + .text-red-400 {
-      +   --tw-text-opacity: 1;
-      +   color: rgba(var(--colors-red-400), var(--tw-text-opacity))
+      + .bg-red {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-red), var(--tw-bg-opacity))
       + }
-      +
-      + .text-red-500 {
-      +   --tw-text-opacity: 1;
-      +   color: rgba(var(--colors-red-500), var(--tw-text-opacity))
-      + }
-      +
-      + .text-red-600 {
-      +   color: var(--colors-red-600)
-      + }
-      +
-      + .text-red-700 {
-      +   color: var(--colors-red-700)
-      + }
-      +
-      + .text-red {
-      +   --tw-text-opacity: 1;
-      +   color: rgba(var(--colors-red), var(--tw-text-opacity))
-      + }
-      +
-      + .text-black {
-      +   --tw-text-opacity: 1;
-      +   color: rgba(0, 0, 0, var(--tw-text-opacity))
-      + }
-      +
-      + .text-white {
-      +   --tw-text-opacity: 1;
-      +   color: rgba(var(--colors-white), var(--tw-text-opacity))
-      + }
-      +
-      + .text-opacity-50 {
-      +   --tw-text-opacity: 0.5
-      + }
-      +
       + .bg-red-400 {
@@ -271,3 +218,2 @@ +   --tw-bg-opacity: 1;
       + }
-      +
       + .bg-red-500 {
@@ -277,29 +223,48 @@ +   --tw-bg-opacity: 1;
       + }
-      +
       + .bg-red-600 {
       +   background-color: var(--colors-red-600)
       + }
-      +
       + .bg-red-700 {
       +   background-color: var(--colors-red-700)
       + }
-      +
-      + .bg-red {
+      + .bg-white {
       +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-red), var(--tw-bg-opacity))
+      +   background-color: rgba(var(--colors-white), var(--tw-bg-opacity))
       + }
-      +
       + .bg-black {
       +   --tw-bg-opacity: 1;
-      +   background-color: rgba(0, 0, 0, var(--tw-bg-opacity))
+      +   background-color: rgb(0 0 0 / var(--tw-bg-opacity))
       + }
-      +
-      + .bg-white {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-white), var(--tw-bg-opacity))
-      + }
-      +
       + .bg-opacity-50 {
       +   --tw-bg-opacity: 0.5
       + }
+      + .text-red {
+      +   --tw-text-opacity: 1;
+      +   color: rgba(var(--colors-red), var(--tw-text-opacity))
+      + }
+      + .text-red-400 {
+      +   --tw-text-opacity: 1;
+      +   color: rgba(var(--colors-red-400), var(--tw-text-opacity))
+      + }
+      + .text-red-500 {
+      +   --tw-text-opacity: 1;
+      +   color: rgba(var(--colors-red-500), var(--tw-text-opacity))
+      + }
+      + .text-red-600 {
+      +   color: var(--colors-red-600)
+      + }
+      + .text-red-700 {
+      +   color: var(--colors-red-700)
+      + }
+      + .text-white {
+      +   --tw-text-opacity: 1;
+      +   color: rgba(var(--colors-white), var(--tw-text-opacity))
+      + }
+      + .text-black {
+      +   --tw-text-opacity: 1;
+      +   color: rgb(0 0 0 / var(--tw-text-opacity))
+      + }
+      + .text-opacity-50 {
+      +   --tw-text-opacity: 0.5
+      + }
 
@@ -360,12 +325,23 @@ "
       + }
-      +
-      + .text-white {
-      +   --tw-text-opacity: 1;
-      +   color: rgba(255, 255, 255, var(--tw-text-opacity))
+      + .bg-green {
+      +   background-color: var(--colors-green)
       + }
-      +
+      + .bg-blue {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-blue-rgb), var(--tw-bg-opacity))
+      + }
+      + .bg-red {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-red-rgb), var(--tw-bg-opacity))
+      + }
+      + .bg-white {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+      + }
+      + .bg-opacity-50 {
+      +   --tw-bg-opacity: 0.5
+      + }
       + .text-green {
       +   color: var(--colors-green)
       + }
-      +
       + .text-blue {
@@ -375,3 +351,2 @@ +   --tw-text-opacity: 1;
       + }
-      +
       + .text-red {
@@ -381,29 +356,9 @@ +   --tw-text-opacity: 1;
       + }
-      +
+      + .text-white {
+      +   --tw-text-opacity: 1;
+      +   color: rgb(255 255 255 / var(--tw-text-opacity))
+      + }
       + .text-opacity-50 {
       +   --tw-text-opacity: 0.5
       + }
-      +
-      + .bg-white {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-green {
-      +   background-color: var(--colors-green)
-      + }
-      +
-      + .bg-blue {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-blue-rgb), var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-red {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-red-rgb), var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-opacity-50 {
-      +   --tw-bg-opacity: 0.5
-      + }
 
@@ -462,12 +417,23 @@ "
       + }
-      +
-      + .text-white {
-      +   --tw-text-opacity: 1;
-      +   color: rgba(255, 255, 255, var(--tw-text-opacity))
+      + .bg-green {
+      +   background-color: var(--colors-green)
       + }
-      +
+      + .bg-blue {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-blue), var(--tw-bg-opacity))
+      + }
+      + .bg-red {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-red), var(--tw-bg-opacity))
+      + }
+      + .bg-white {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+      + }
+      + .bg-opacity-50 {
+      +   --tw-bg-opacity: 0.5
+      + }
       + .text-green {
       +   color: var(--colors-green)
       + }
-      +
       + .text-blue {
@@ -477,3 +443,2 @@ +   --tw-text-opacity: 1;
       + }
-      +
       + .text-red {
@@ -483,29 +448,9 @@ +   --tw-text-opacity: 1;
       + }
-      +
+      + .text-white {
+      +   --tw-text-opacity: 1;
+      +   color: rgb(255 255 255 / var(--tw-text-opacity))
+      + }
       + .text-opacity-50 {
       +   --tw-text-opacity: 0.5
       + }
-      +
-      + .bg-white {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-green {
-      +   background-color: var(--colors-green)
-      + }
-      +
-      + .bg-blue {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-blue), var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-red {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-red), var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-opacity-50 {
-      +   --tw-bg-opacity: 0.5
-      + }
 
@@ -512,0 +457,0 @@ "

__tests__/force-rgb.test.js

@@ -9,6 +9,3 @@ const tailwindcssVariables = require('../src/index')
       corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
-      purge: {
-        enabled: true,
-        content: [utils.content()],
-      },
+      content: [utils.content()],
 
@@ -66,12 +63,28 @@ darkMode: false,
       + }
-      +
-      + .text-black {
+      + .bg-red {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-red), var(--tw-bg-opacity))
+      + }
+      + .bg-red-400 {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-red-400), var(--tw-bg-opacity))
+      + }
+      + .bg-red-500 {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-red-500), var(--tw-bg-opacity))
+      + }
+      + .bg-white {
+      +   background-color: var(--colors-white)
+      + }
+      + .bg-black {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgb(0 0 0 / var(--tw-bg-opacity))
+      + }
+      + .bg-opacity-50 {
+      +   --tw-bg-opacity: 0.5
+      + }
+      + .text-red {
       +   --tw-text-opacity: 1;
-      +   color: rgba(0, 0, 0, var(--tw-text-opacity))
+      +   color: rgba(var(--colors-red), var(--tw-text-opacity))
       + }
-      +
-      + .text-white {
-      +   color: var(--colors-white)
-      + }
-      +
       + .text-red-400 {
@@ -81,3 +94,2 @@ +   --tw-text-opacity: 1;
       + }
-      +
       + .text-red-500 {
@@ -87,39 +99,12 @@ +   --tw-text-opacity: 1;
       + }
-      +
-      + .text-red {
+      + .text-white {
+      +   color: var(--colors-white)
+      + }
+      + .text-black {
       +   --tw-text-opacity: 1;
-      +   color: rgba(var(--colors-red), var(--tw-text-opacity))
+      +   color: rgb(0 0 0 / var(--tw-text-opacity))
       + }
-      +
       + .text-opacity-50 {
       +   --tw-text-opacity: 0.5
       + }
-      +
-      + .bg-black {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(0, 0, 0, var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-white {
-      +   background-color: var(--colors-white)
-      + }
-      +
-      + .bg-red-400 {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-red-400), var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-red-500 {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-red-500), var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-red {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-red), var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-opacity-50 {
-      +   --tw-bg-opacity: 0.5
-      + }
 
@@ -134,6 +119,3 @@ "
       corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
-      purge: {
-        enabled: true,
-        content: [utils.content()],
-      },
+      content: [utils.content()],
 
@@ -189,12 +171,20 @@ darkMode: false,
       + }
-      +
-      + .text-black {
-      +   --tw-text-opacity: 1;
-      +   color: rgba(0, 0, 0, var(--tw-text-opacity))
+      + .bg-red-400 {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))
       + }
-      +
-      + .text-white {
-      +   color: var(--colors-white)
+      + .bg-red-500 {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgb(255 0 0 / var(--tw-bg-opacity))
       + }
-      +
+      + .bg-white {
+      +   background-color: var(--colors-white)
+      + }
+      + .bg-black {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgb(0 0 0 / var(--tw-bg-opacity))
+      + }
+      + .bg-opacity-50 {
+      +   --tw-bg-opacity: 0.5
+      + }
       + .text-red-400 {
@@ -204,34 +194,16 @@ +   --tw-text-opacity: 1;
       + }
-      +
       + .text-red-500 {
       +   --tw-text-opacity: 1;
-      +   color: rgba(255, 0, 0, var(--tw-text-opacity))
+      +   color: rgb(255 0 0 / var(--tw-text-opacity))
       + }
-      +
+      + .text-white {
+      +   color: var(--colors-white)
+      + }
+      + .text-black {
+      +   --tw-text-opacity: 1;
+      +   color: rgb(0 0 0 / var(--tw-text-opacity))
+      + }
       + .text-opacity-50 {
       +   --tw-text-opacity: 0.5
       + }
-      +
-      + .bg-black {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(0, 0, 0, var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-white {
-      +   background-color: var(--colors-white)
-      + }
-      +
-      + .bg-red-400 {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-red-400-rgb), var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-red-500 {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(255, 0, 0, var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-opacity-50 {
-      +   --tw-bg-opacity: 0.5
-      + }
 
@@ -246,6 +218,3 @@ "
       corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
-      purge: {
-        enabled: true,
-        content: [utils.content()],
-      },
+      content: [utils.content()],
 
@@ -309,18 +278,33 @@ darkMode: false,
       + }
-      +
-      + .text-indigo {
-      +   --tw-text-opacity: 1;
-      +   color: rgba(236, 72, 153, var(--tw-text-opacity))
+      + .bg-red {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-red), var(--tw-bg-opacity))
       + }
-      +
-      + .text-black {
-      +   --tw-text-opacity: 1;
-      +   color: rgba(0, 0, 0, var(--tw-text-opacity))
+      + .bg-red-400 {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-red-400), var(--tw-bg-opacity))
       + }
-      +
-      + .text-white {
+      + .bg-red-500 {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-red-500), var(--tw-bg-opacity))
+      + }
+      + .bg-white {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-white), var(--tw-bg-opacity))
+      + }
+      + .bg-black {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgb(0 0 0 / var(--tw-bg-opacity))
+      + }
+      + .bg-indigo {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgb(236 72 153 / var(--tw-bg-opacity))
+      + }
+      + .bg-opacity-50 {
+      +   --tw-bg-opacity: 0.5
+      + }
+      + .text-red {
       +   --tw-text-opacity: 1;
-      +   color: rgba(var(--colors-white), var(--tw-text-opacity))
+      +   color: rgba(var(--colors-red), var(--tw-text-opacity))
       + }
-      +
       + .text-red-400 {
@@ -330,3 +314,2 @@ +   --tw-text-opacity: 1;
       + }
-      +
       + .text-red-500 {
@@ -336,45 +319,17 @@ +   --tw-text-opacity: 1;
       + }
-      +
-      + .text-red {
+      + .text-white {
       +   --tw-text-opacity: 1;
-      +   color: rgba(var(--colors-red), var(--tw-text-opacity))
+      +   color: rgba(var(--colors-white), var(--tw-text-opacity))
       + }
-      +
+      + .text-black {
+      +   --tw-text-opacity: 1;
+      +   color: rgb(0 0 0 / var(--tw-text-opacity))
+      + }
+      + .text-indigo {
+      +   --tw-text-opacity: 1;
+      +   color: rgb(236 72 153 / var(--tw-text-opacity))
+      + }
       + .text-opacity-50 {
       +   --tw-text-opacity: 0.5
       + }
-      +
-      + .bg-indigo {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(236, 72, 153, var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-black {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(0, 0, 0, var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-white {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-white), var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-red-400 {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-red-400), var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-red-500 {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-red-500), var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-red {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-red), var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-opacity-50 {
-      +   --tw-bg-opacity: 0.5
-      + }
 
@@ -389,6 +344,3 @@ "
       corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
-      purge: {
-        enabled: true,
-        content: [utils.content()],
-      },
+      content: [utils.content()],
 
@@ -436,12 +388,19 @@ darkMode: false,
       + }
-      +
-      + .text-white {
-      +   --tw-text-opacity: 1;
-      +   color: rgba(255, 255, 255, var(--tw-text-opacity))
+      + .bg-green {
+      +   background-color: var(--colors-green)
       + }
-      +
+      + .bg-red {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-red-rgb), var(--tw-bg-opacity))
+      + }
+      + .bg-white {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+      + }
+      + .bg-opacity-50 {
+      +   --tw-bg-opacity: 0.5
+      + }
       + .text-green {
       +   color: var(--colors-green)
       + }
-      +
       + .text-red {
@@ -451,24 +410,9 @@ +   --tw-text-opacity: 1;
       + }
-      +
+      + .text-white {
+      +   --tw-text-opacity: 1;
+      +   color: rgb(255 255 255 / var(--tw-text-opacity))
+      + }
       + .text-opacity-50 {
       +   --tw-text-opacity: 0.5
       + }
-      +
-      + .bg-white {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-green {
-      +   background-color: var(--colors-green)
-      + }
-      +
-      + .bg-red {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-red-rgb), var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-opacity-50 {
-      +   --tw-bg-opacity: 0.5
-      + }
 
@@ -483,6 +427,3 @@ "
       corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
-      purge: {
-        enabled: true,
-        content: [utils.content()],
-      },
+      content: [utils.content()],
 
@@ -520,8 +461,13 @@ darkMode: false,
       + }
-      +
-      + .text-white {
-      +   --tw-text-opacity: 1;
-      +   color: rgba(255, 255, 255, var(--tw-text-opacity))
+      + .bg-green {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-green), var(--tw-bg-opacity))
       + }
-      +
+      + .bg-white {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+      + }
+      + .bg-opacity-50 {
+      +   --tw-bg-opacity: 0.5
+      + }
       + .text-green {
@@ -531,20 +477,9 @@ +   --tw-text-opacity: 1;
       + }
-      +
+      + .text-white {
+      +   --tw-text-opacity: 1;
+      +   color: rgb(255 255 255 / var(--tw-text-opacity))
+      + }
       + .text-opacity-50 {
       +   --tw-text-opacity: 0.5
       + }
-      +
-      + .bg-white {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-green {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-green), var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-opacity-50 {
-      +   --tw-bg-opacity: 0.5
-      + }
 
@@ -559,6 +494,3 @@ "
       corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
-      purge: {
-        enabled: true,
-        content: [utils.content()],
-      },
+      content: [utils.content()],
 
@@ -597,8 +529,13 @@ darkMode: false,
       + }
-      +
-      + .text-white {
-      +   --tw-text-opacity: 1;
-      +   color: rgba(255, 255, 255, var(--tw-text-opacity))
+      + .bg-green {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--colors-green-rgb), var(--tw-bg-opacity))
       + }
-      +
+      + .bg-white {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+      + }
+      + .bg-opacity-50 {
+      +   --tw-bg-opacity: 0.5
+      + }
       + .text-green {
@@ -608,20 +545,9 @@ +   --tw-text-opacity: 1;
       + }
-      +
+      + .text-white {
+      +   --tw-text-opacity: 1;
+      +   color: rgb(255 255 255 / var(--tw-text-opacity))
+      + }
       + .text-opacity-50 {
       +   --tw-text-opacity: 0.5
       + }
-      +
-      + .bg-white {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-green {
-      +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-green-rgb), var(--tw-bg-opacity))
-      + }
-      +
-      + .bg-opacity-50 {
-      +   --tw-bg-opacity: 0.5
-      + }
 
@@ -628,0 +554,0 @@ "

__tests__/format-variables.test.js

@@ -8,3 +8,3 @@ const tailwindcssVariables = require('../src/index')
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: false,
@@ -15,3 +15,3 @@ theme: {
             colors: {
-              'hello[$&+,:;=?@#|\'<>.-^*()%!]world': '100%',
+              "hello[$&+,:;=?@#|'<>.-^*()%!]world": '100%',
               underscore_to_dash: '100%',
@@ -22,4 +22,5 @@ 'underscore_to_dash-with-dash': '100%',
           },
-          '[type=\'button\']': {
-            'hello[$&+,:;=?@#|\'<>.-^*()%!]world': '100%',
+
+          "[type='button']": {
+            "hello[$&+,:;=?@#|'<>.-^*()%!]world": '100%',
             underscore_to_dash: '100%',
@@ -34,4 +35,5 @@ 'underscore_to_dash-with-dash': '100%',
       },
+
       plugins: [tailwindcssVariables],
-    }),
+    })
   ).toMatchInlineSnapshot(`
@@ -47,3 +49,2 @@ "
       + }
-      +
       + [type='button'] {
@@ -50,0 +51,0 @@ +   --hello-world: 100%;

__tests__/nested-variables.test.js

@@ -7,3 +7,3 @@ const tailwindcssVariables = require('../src/index')
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: false,
@@ -22,2 +22,3 @@ theme: {
                 },
+
                 moon: {
@@ -33,2 +34,3 @@ white: 'white',
           },
+
           '.container>.card, .card-body': {
@@ -44,2 +46,3 @@ colors: {
                 },
+
                 moon: {
@@ -57,2 +60,3 @@ white: 'white',
       },
+
       plugins: [tailwindcssVariables],
@@ -74,3 +78,2 @@ })
       + }
-      +
       + .container>.card {
@@ -86,3 +89,2 @@ +   --colors: #555555;
       + }
-      +
       + .card-body {
@@ -89,0 +91,0 @@ +   --colors: #555555;

__tests__/plugin-api.test.js

@@ -6,3 +6,3 @@ const utils = require('./util/_utils')(__filename)
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'media',
@@ -18,2 +18,3 @@ theme: {
       },
+
       plugins: [require('../examples/api-examples/simple/index')],
@@ -30,3 +31,2 @@ })
       + }
-      +
       + .admin {
@@ -37,14 +37,12 @@ +   --prefix2-colors-primary: blue;
       + }
-      +
       + @media (prefers-color-scheme: dark) {
       +   :root {
-      +     --prefix2-colors-primary: yellow;
-      +     --prefix2-colors-secondary: white;
-      +     --prefix2-colors-warning: pink
+      +       --prefix2-colors-primary: yellow;
+      +       --prefix2-colors-secondary: white;
+      +       --prefix2-colors-warning: pink
       +   }
-      +
       +   .admin {
-      +     --prefix2-colors-primary: blue;
-      +     --prefix2-colors-secondary: green;
-      +     --prefix2-colors-warning: gray
+      +       --prefix2-colors-primary: blue;
+      +       --prefix2-colors-secondary: green;
+      +       --prefix2-colors-warning: gray
       +   }
@@ -60,3 +58,3 @@ + }
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'class',
@@ -72,2 +70,3 @@ theme: {
       },
+
       plugins: [require('../examples/api-examples/simple/index')],
@@ -84,3 +83,2 @@ })
       + }
-      +
       + .admin {
@@ -91,3 +89,2 @@ +   --prefix2-colors-primary: blue;
       + }
-      +
       + .dark {
@@ -98,3 +95,2 @@ +   --prefix2-colors-primary: yellow;
       + }
-      +
       + .dark .admin {
@@ -113,3 +109,3 @@ +   --prefix2-colors-primary: blue;
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'class',
@@ -128,3 +124,2 @@ theme: {},
       + }
-      +
       + .admin {
@@ -135,3 +130,2 @@ +   --prefix2-colors-primary: blue;
       + }
-      +
       + .dark {
@@ -142,3 +136,2 @@ +   --prefix2-colors-primary: yellow;
       + }
-      +
       + .dark .admin {
@@ -149,11 +142,8 @@ +   --prefix2-colors-primary: blue;
       + }
-      +
       + .form-select {
       +   background-color: var(--colors-prefix2-primary);
       + }
-      +
       + .form-select .default-multi {
       +   background-color: var(--prefix2-colors-secondary);
       + }
-      +
       + .form-select .other-multi {
@@ -170,3 +160,3 @@ +   background-color: var(--prefix2-colors-warning);
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'media',
@@ -185,3 +175,2 @@ theme: {},
       + }
-      +
       + .admin {
@@ -192,25 +181,20 @@ +   --prefix2-colors-primary: blue;
       + }
-      +
       + @media (prefers-color-scheme: dark) {
       +   :root {
-      +     --prefix2-colors-primary: yellow;
-      +     --prefix2-colors-secondary: white;
-      +     --prefix2-colors-warning: pink;
+      +       --prefix2-colors-primary: yellow;
+      +       --prefix2-colors-secondary: white;
+      +       --prefix2-colors-warning: pink;
       +   }
-      +
       +   .admin {
-      +     --prefix2-colors-primary: blue;
-      +     --prefix2-colors-secondary: green;
-      +     --prefix2-colors-warning: gray;
+      +       --prefix2-colors-primary: blue;
+      +       --prefix2-colors-secondary: green;
+      +       --prefix2-colors-warning: gray;
       +   }
       + }
-      +
       + .form-select {
       +   background-color: var(--colors-prefix2-primary);
       + }
-      +
       + .form-select .default-multi {
       +   background-color: var(--prefix2-colors-secondary);
       + }
-      +
       + .form-select .other-multi {
@@ -227,3 +211,3 @@ +   background-color: var(--prefix2-colors-warning);
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'class',
@@ -242,3 +226,2 @@ theme: {},
       + }
-      +
       + .admin {
@@ -249,3 +232,2 @@ +   --prefix2-colors-primary: blue;
       + }
-      +
       + .dark {
@@ -256,3 +238,2 @@ +   --prefix2-colors-primary: yellow;
       + }
-      +
       + .dark .admin {
@@ -263,11 +244,8 @@ +   --prefix2-colors-primary: blue;
       + }
-      +
       + .select {
       +   background-color: var(--colors-prefix2-primary);
       + }
-      +
       + .select .default-multi {
       +   background-color: var(--prefix2-colors-secondary);
       + }
-      +
       + .select .other-multi {
@@ -284,3 +262,3 @@ +   background-color: var(--prefix2-colors-warning);
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'media',
@@ -299,3 +277,2 @@ theme: {},
       + }
-      +
       + .admin {
@@ -306,25 +283,20 @@ +   --prefix2-colors-primary: blue;
       + }
-      +
       + @media (prefers-color-scheme: dark) {
       +   :root {
-      +     --prefix2-colors-primary: yellow;
-      +     --prefix2-colors-secondary: white;
-      +     --prefix2-colors-warning: pink;
+      +       --prefix2-colors-primary: yellow;
+      +       --prefix2-colors-secondary: white;
+      +       --prefix2-colors-warning: pink;
       +   }
-      +
       +   .admin {
-      +     --prefix2-colors-primary: blue;
-      +     --prefix2-colors-secondary: green;
-      +     --prefix2-colors-warning: gray;
+      +       --prefix2-colors-primary: blue;
+      +       --prefix2-colors-secondary: green;
+      +       --prefix2-colors-warning: gray;
       +   }
       + }
-      +
       + .select {
       +   background-color: var(--colors-prefix2-primary);
       + }
-      +
       + .select .default-multi {
       +   background-color: var(--prefix2-colors-secondary);
       + }
-      +
       + .select .other-multi {
@@ -341,3 +313,3 @@ +   background-color: var(--prefix2-colors-warning);
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'media',
@@ -356,3 +328,2 @@ theme: {},
       + }
-      +
       + .admin {
@@ -363,14 +334,12 @@ +   --prefix2-colors-primary: blue;
       + }
-      +
       + @media (prefers-color-scheme: dark) {
       +   :root {
-      +     --prefix2-colors-primary: yellow;
-      +     --prefix2-colors-secondary: red;
-      +     --prefix2-colors-warning: purple
+      +       --prefix2-colors-primary: yellow;
+      +       --prefix2-colors-secondary: red;
+      +       --prefix2-colors-warning: purple
       +   }
-      +
       +   .admin {
-      +     --prefix2-colors-primary: green;
-      +     --prefix2-colors-secondary: orange;
-      +     --prefix2-colors-warning: teal
+      +       --prefix2-colors-primary: green;
+      +       --prefix2-colors-secondary: orange;
+      +       --prefix2-colors-warning: teal
       +   }
@@ -386,3 +355,3 @@ + }
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'class',
@@ -398,2 +367,3 @@ theme: {
       },
+
       plugins: [require('../examples/api-examples/with-themes/index')],
@@ -410,3 +380,2 @@ })
       + }
-      +
       + .admin {
@@ -417,3 +386,2 @@ +   --prefix2-colors-primary: blue;
       + }
-      +
       + .dark {
@@ -424,3 +392,2 @@ +   --prefix2-colors-primary: yellow;
       + }
-      +
       + .dark .admin {
@@ -439,3 +406,3 @@ +   --prefix2-colors-primary: green;
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'media',
@@ -451,2 +418,3 @@ theme: {
       },
+
       plugins: [require('../examples/api-examples/advanced/index')],
@@ -463,3 +431,2 @@ })
       + }
-      +
       + .admin {
@@ -470,25 +437,20 @@ +   --prefix2-colors-primary: blue;
       + }
-      +
       + @media (prefers-color-scheme: dark) {
       +   :root {
-      +     --prefix2-colors-primary: yellow;
-      +     --prefix2-colors-secondary: red;
-      +     --prefix2-colors-warning: purple;
+      +       --prefix2-colors-primary: yellow;
+      +       --prefix2-colors-secondary: red;
+      +       --prefix2-colors-warning: purple;
       +   }
-      +
       +   .admin {
-      +     --prefix2-colors-primary: green;
-      +     --prefix2-colors-secondary: orange;
-      +     --prefix2-colors-warning: teal;
+      +       --prefix2-colors-primary: green;
+      +       --prefix2-colors-secondary: orange;
+      +       --prefix2-colors-warning: teal;
       +   }
       + }
-      +
       + .form-select {
       +   background-color: var(--colors-prefix2-primary);
       + }
-      +
       + .form-select .default-multi {
       +   background-color: var(--prefix2-colors-secondary);
       + }
-      +
       + .form-select .other-multi {
@@ -505,3 +467,3 @@ +   background-color: var(--prefix2-colors-warning);
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'class',
@@ -517,2 +479,3 @@ theme: {
       },
+
       plugins: [require('../examples/api-examples/advanced/index')],
@@ -529,3 +492,2 @@ })
       + }
-      +
       + .admin {
@@ -536,3 +498,2 @@ +   --prefix2-colors-primary: blue;
       + }
-      +
       + .dark {
@@ -543,3 +504,2 @@ +   --prefix2-colors-primary: yellow;
       + }
-      +
       + .dark .admin {
@@ -550,11 +510,8 @@ +   --prefix2-colors-primary: green;
       + }
-      +
       + .form-select {
       +   background-color: var(--colors-prefix2-primary);
       + }
-      +
       + .form-select .default-multi {
       +   background-color: var(--prefix2-colors-secondary);
       + }
-      +
       + .form-select .other-multi {
@@ -561,0 +518,0 @@ +   background-color: var(--prefix2-colors-warning);

__tests__/readme.test.js

@@ -9,3 +9,3 @@ const plugin = require('tailwindcss/plugin')
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: false,
@@ -21,2 +21,3 @@ theme: {
             },
+
             colors: {
@@ -28,2 +29,3 @@ red: {
           },
+
           '.container': {
@@ -36,2 +38,3 @@ sizes: {
       },
+
       plugins: [tailwindcssVariables],
@@ -48,3 +51,2 @@ })
       + }
-      +
       + .container {
@@ -61,3 +63,3 @@ +   --sizes-medium: 1.5rem
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'class',
@@ -70,2 +72,3 @@ theme: {
             },
+
             colors: {
@@ -77,2 +80,3 @@ red: {
           },
+
           '.container': {
@@ -86,2 +90,3 @@ colors: {
         },
+
         darkVariables: {
@@ -95,2 +100,3 @@ DEFAULT: {
           },
+
           '.container': {
@@ -105,2 +111,3 @@ colors: {
       },
+
       plugins: [tailwindcssVariables],
@@ -116,11 +123,8 @@ })
       + }
-      +
       + .container {
       +   --colors-red-50: indigo
       + }
-      +
       + :root.dark {
       +   --colors-red-50: blue
       + }
-      +
       + :root.dark .container {
@@ -137,3 +141,3 @@ +   --colors-red-50: green
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'class',
@@ -146,2 +150,3 @@ theme: {
             },
+
             colors: {
@@ -153,2 +158,3 @@ red: {
           },
+
           '.container': {
@@ -162,2 +168,3 @@ colors: {
         },
+
         darkVariables: {
@@ -171,2 +178,3 @@ DEFAULT: {
           },
+
           '.container': {
@@ -181,2 +189,3 @@ colors: {
       },
+
       plugins: [
@@ -197,11 +206,8 @@ tailwindcssVariables({
       + }
-      +
       + .container {
       +   --colors-red-50: indigo
       + }
-      +
       + .custom-dark-selector {
       +   --colors-red-50: blue
       + }
-      +
       + .custom-dark-selector .container {
@@ -218,3 +224,3 @@ +   --colors-red-50: green
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'media',
@@ -227,2 +233,3 @@ theme: {
             },
+
             colors: {
@@ -234,2 +241,3 @@ red: {
           },
+
           '.container': {
@@ -243,2 +251,3 @@ colors: {
         },
+
         darkVariables: {
@@ -252,2 +261,3 @@ DEFAULT: {
           },
+
           '.container': {
@@ -262,2 +272,3 @@ colors: {
       },
+
       plugins: [tailwindcssVariables],
@@ -273,14 +284,11 @@ })
       + }
-      +
       + .container {
       +   --colors-red-50: indigo
       + }
-      +
       + @media (prefers-color-scheme: dark) {
       +   :root {
-      +     --colors-red-50: blue
+      +       --colors-red-50: blue
       +   }
-      +
       +   .container {
-      +     --colors-red-50: green
+      +       --colors-red-50: green
       +   }
@@ -296,3 +304,3 @@ + }
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: false,
@@ -308,2 +316,3 @@ theme: {
             },
+
             colors: {
@@ -315,2 +324,3 @@ red: {
           },
+
           '.container': {
@@ -323,2 +333,3 @@ sizes: {
       },
+
       plugins: [
@@ -339,3 +350,2 @@ tailwindcssVariables({
       + }
-      +
       + .container {
@@ -352,3 +362,3 @@ +   --admin-sizes-medium: 1.5rem
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: false,
@@ -374,2 +384,3 @@ theme: {
       },
+
       plugins: [tailwindcssVariables],
@@ -395,3 +406,3 @@ })
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: false,
@@ -408,2 +419,3 @@ theme: {
           },
+
           "[type='button']": {
@@ -420,2 +432,3 @@ "hello[$&+,:;=?@#|'<>.-^*()%!]world": '100%',
       },
+
       plugins: [tailwindcssVariables],
@@ -433,3 +446,2 @@ })
       + }
-      +
       + [type='button'] {
@@ -472,3 +484,3 @@ +   --hello-world: 100%;
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'class',
@@ -493,3 +505,2 @@ theme: {},
       + }
-      +
       + :root.dark {
@@ -530,3 +541,3 @@ +   --myplugin-colors-primary: red;
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: 'class',
@@ -541,2 +552,3 @@ theme: {},
               },
+
               multi: {
@@ -546,2 +558,3 @@ '&.default-multi': {
                 },
+
                 '&.other-multi': {
@@ -572,3 +585,2 @@ backgroundColor: 'var(--myplugin-colors-warning)',
       + }
-      +
       + :root.dark {
@@ -579,11 +591,8 @@ +   --myplugin-colors-primary: red;
       + }
-      +
       + .form-select {
       +   background-color: var(--myplugin-colors-primary);
       + }
-      +
       + .form-select.default-multi {
       +   background-color: var(--myplugin-colors-secondary);
       + }
-      +
       + .form-select.other-multi {
@@ -602,3 +611,3 @@ +   background-color: var(--myplugin-colors-warning);
         {
-          purge: [utils.content()],
+          content: [utils.content()],
           darkMode: 'class',
@@ -618,11 +627,8 @@ ...require('../examples/api-examples/readme-source/tailwind.config'),
       + }
-      +
       + .form-select {
       +   background-color: var(--forms-colors-primary);
       + }
-      +
       + .form-select .default-multi {
       +   background-color: var(--forms-colors-secondary);
       + }
-      +
       + .form-select .other-multi {
@@ -629,0 +635,0 @@ +   background-color: var(--forms-colors-warning);

__tests__/util/_utils.js

@@ -9,9 +9,13 @@ const tailwind = require('tailwindcss')
 
-  utils.run = (config = {}) => {
+  utils.run = function(config = {}) {
+    let { currentTestName } = expect.getState();
     return postcss([tailwind({ corePlugins: [], ...config })])
-      .process(['@tailwind base;', '@tailwind components;', '@tailwind utilities;'].join('\n'), { from: undefined })
+      .process(['@tailwind base;', '@tailwind components;', '@tailwind utilities;'].join('\n'), {
+        // from: `${path.resolve(__filename)}?test=${currentTestName}`
+        from: undefined
+      })
       .then((result) => result.css)
   }
 
-  utils.diffOnly = async function(options = {}) {
+  utils.diffOnly = async function (options = {}) {
     const [before, after] = await Promise.all([utils.run(), utils.run(options)])
@@ -27,2 +31,3 @@
       .replace(/[-+] __REMOVE_ME__\n/g, '')
+      .replace(/\+     /g, '+   ')
       .replace(/Snapshot Diff:\n/g, '')
@@ -39,6 +44,10 @@ .replace(/"/g, '\'')
     }
+    let content;
+    if (filename) {
+      content = path.resolve(__dirname, '../' + path.parse(filename).name + '.test.' + ext)
+    } else {
+      content = path.resolve(__dirname, '../' + path.parse(contentFile).name + '.' + ext)
+    }
 
-    let file = filename ? filename : contentFile
-
-    return path.resolve(__dirname, '../' + path.parse(file).name + '.' + ext)
+    return content;
   }
@@ -45,0 +54,0 @@

__tests__/variable-prefix.test.js

@@ -7,3 +7,3 @@ const tailwindcssVariables = require('../src/index')
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: false,
@@ -17,2 +17,3 @@ theme: {
           },
+
           '.container': {
@@ -25,2 +26,3 @@ colors: {
       },
+
       plugins: [
@@ -31,3 +33,3 @@ tailwindcssVariables({
       ],
-    }),
+    })
   ).toMatchInlineSnapshot(`
@@ -40,3 +42,2 @@ "
       + }
-      +
       + .container {
@@ -53,3 +54,3 @@ +   --prefix-colors-secondary: #000000
     await utils.diffOnly({
-      purge: [utils.content()],
+      content: [utils.content()],
       darkMode: false,
@@ -63,2 +64,3 @@ theme: {
           },
+
           '.container': {
@@ -71,2 +73,3 @@ colors: {
       },
+
       plugins: [
@@ -77,3 +80,3 @@ tailwindcssVariables({
       ],
-    }),
+    })
   ).toMatchInlineSnapshot(`
@@ -86,3 +89,2 @@ "
       + }
-      +
       + .container {
@@ -89,0 +91,0 @@ +   --hello-world1tail-wind-colors-secondary: #000000

.github/workflows/tests.yml

@@ -44,5 +44,5 @@ name: tests
 
-      - name: Test
+      - name: Tests
         run: npm run test -- --coverage
         env:
           CI: true

package.json

 {
   "name": "@mertasan/tailwindcss-variables",
-  "version": "1.3.3",
+  "version": "2.0.0",
   "description": "Easily create css variables without the need for a css file!",
@@ -39,18 +39,17 @@ "main": "src/index.js",
   "devDependencies": {
-    "autoprefixer": "^10.2.6",
+    "autoprefixer": "^10.4.0",
     "cross-env": "^7.0.3",
-    "eslint": "^7.29.0",
+    "eslint": "^8.2.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "fs-extra": "^10.0.0",
-    "jest": "^27.0.5",
-    "postcss": "^8.3.5",
-    "prettier": "^2.3.1",
+    "jest": "^27.4.3",
+    "postcss": "^8.4.4",
+    "prettier": "^2.5.0",
     "snapshot-diff": "^0.9.0",
-    "tailwindcss": "^2.2.4"
+    "tailwindcss": "^3.0.0"
   },
   "peerDependencies": {
-    "autoprefixer": ">=9.8.0",
-    "postcss": ">=7.0.30",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4"
+    "autoprefixer": "^10.0.2",
+    "postcss": "^8.0.9"
   },
@@ -57,0 +56,0 @@ "prettier": {

README.md

 ![Tests](https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/tests?label=tests)
-[![Build Status](https://img.shields.io/travis/mertasan/tailwindcss-variables/master.svg?label=travis-ci)](https://travis-ci.com/mertasan/tailwindcss-variables)
 [![Examples](https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/build?label=examples)](https://github.com/mertasan/tailwindcss-variables/tree/master/examples)
-![Dependencies](https://status.david-dm.org/gh/mertasan/tailwindcss-variables.svg)
+![npm](https://img.shields.io/npm/dt/@mertasan/tailwindcss-variables)
 [![license](https://img.shields.io/badge/License-GPLv3-green.svg?label=license)](//github.com/mertasan/tailwindcss-variables/tree/master/LICENSE)
@@ -34,2 +33,8 @@
 
+## Tailwind CSS Version Compatibility
+| Tailwind CSS | Package |
+|--------------|----------------|
+| 2.x          | 1.x            |
+| 3.x          | 2.x            |
+
 ## Installation
@@ -544,5 +549,5 @@
   plugins: [
-    require('@mertasan/tailwindcss-variables'){
+    require('@mertasan/tailwindcss-variables')({
       colorVariables: true
-    }
+    })
   ]
@@ -667,5 +672,5 @@ }
   plugins: [
-    require('@mertasan/tailwindcss-variables'){
+    require('@mertasan/tailwindcss-variables')({
       colorVariables: true,
-    }
+    })
   ]
@@ -711,6 +716,6 @@ }
   plugins: [
-    require('@mertasan/tailwindcss-variables'){
+    require('@mertasan/tailwindcss-variables')({
       colorVariables: true,
       forceRGB: true,
-    }
+    })
   ]
@@ -762,3 +767,3 @@ }
   plugins: [
-    require('@mertasan/tailwindcss-variables'){
+    require('@mertasan/tailwindcss-variables')({
       colorVariables: true,
@@ -769,3 +774,3 @@ extendColors: {
       }
-    }
+    })
   ]
@@ -835,3 +840,3 @@ }
   plugins: [
-    require('@mertasan/tailwindcss-variables'){
+    require('@mertasan/tailwindcss-variables')({
       colorVariables: true,
@@ -843,3 +848,3 @@ forceRGB: true,
       }
-    }
+    })
   ]
@@ -1132,3 +1137,2 @@ }
   },
-  variants: {},
   plugins: [require('my-plugin')],
@@ -1135,0 +1139,0 @@ }

README.tr.md

 ![Tests](https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/tests?label=tests)
-[![Build Status](https://img.shields.io/travis/mertasan/tailwindcss-variables/master.svg?label=travis-ci)](https://travis-ci.com/mertasan/tailwindcss-variables)
 [![Examples](https://img.shields.io/github/workflow/status/mertasan/tailwindcss-variables/build?label=examples)](https://github.com/mertasan/tailwindcss-variables/tree/master/examples)
-![Dependencies](https://status.david-dm.org/gh/mertasan/tailwindcss-variables.svg)
+![npm](https://img.shields.io/npm/dt/@mertasan/tailwindcss-variables)
 [![license](https://img.shields.io/badge/License-GPLv3-green.svg?label=license)](//github.com/mertasan/tailwindcss-variables/tree/master/LICENSE)
@@ -35,2 +34,8 @@
 
+## Tailwind CSS Versiyon Uyumluluğu
+| Tailwind CSS | Paket |
+|--------------|-------|
+| 2.x          | 1.x   |
+| 3.x          | 2.x   |
+
 ## Kurulum
@@ -1132,3 +1137,2 @@
   },
-  variants: {},
   plugins: [require('my-plugin')],
@@ -1135,0 +1139,0 @@ }

scripts/build.js

@@ -15,3 +15,3 @@ const fs = require('fs')
       ...require('../' + examplePath + '/tailwind.config'),
-      purge: ['./' + examplePath + '/*.html'],
+      content: ['./' + examplePath + '/*.html'],
     }),
@@ -18,0 +18,0 @@ require('autoprefixer'),

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

194620

1.53%

Dependency count

3

-25%

Number of package files

51

4.08%

Number of lines in readme file

1188

0.34%

Number of low supply chain risk alerts

28

-6.67%

Worsened metrics

Lines of code

3514

-3.04%

No dependency changes