tailwindcss 3.2.4 → 3.2.6

package/stubs/defaultConfig.stub.js

@@ -4,108 +4,10 @@ module.exports = {
   presets: [],
   darkMode: 'media', // or 'class'
   theme: {
-    screens: {
-      sm: '640px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1280px',
-      '2xl': '1536px',
-    },
-    supports: {},
-    colors: ({ colors }) => ({
-      inherit: colors.inherit,
-      current: colors.current,
-      transparent: colors.transparent,
-      black: colors.black,
-      white: colors.white,
-      slate: colors.slate,
-      gray: colors.gray,
-      zinc: colors.zinc,
-      neutral: colors.neutral,
-      stone: colors.stone,
-      red: colors.red,
-      orange: colors.orange,
-      amber: colors.amber,
-      yellow: colors.yellow,
-      lime: colors.lime,
-      green: colors.green,
-      emerald: colors.emerald,
-      teal: colors.teal,
-      cyan: colors.cyan,
-      sky: colors.sky,
-      blue: colors.blue,
-      indigo: colors.indigo,
-      violet: colors.violet,
-      purple: colors.purple,
-      fuchsia: colors.fuchsia,
-      pink: colors.pink,
-      rose: colors.rose,
-    }),
-    columns: {
+    accentColor: ({ theme }) => ({
+      ...theme('colors'),
       auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-      8: '8',
-      9: '9',
-      10: '10',
-      11: '11',
-      12: '12',
-      '3xs': '16rem',
-      '2xs': '18rem',
-      xs: '20rem',
-      sm: '24rem',
-      md: '28rem',
-      lg: '32rem',
-      xl: '36rem',
-      '2xl': '42rem',
-      '3xl': '48rem',
-      '4xl': '56rem',
-      '5xl': '64rem',
-      '6xl': '72rem',
-      '7xl': '80rem',
-    },
-    spacing: {
-      px: '1px',
-      0: '0px',
-      0.5: '0.125rem',
-      1: '0.25rem',
-      1.5: '0.375rem',
-      2: '0.5rem',
-      2.5: '0.625rem',
-      3: '0.75rem',
-      3.5: '0.875rem',
-      4: '1rem',
-      5: '1.25rem',
-      6: '1.5rem',
-      7: '1.75rem',
-      8: '2rem',
-      9: '2.25rem',
-      10: '2.5rem',
-      11: '2.75rem',
-      12: '3rem',
-      14: '3.5rem',
-      16: '4rem',
-      20: '5rem',
-      24: '6rem',
-      28: '7rem',
-      32: '8rem',
-      36: '9rem',
-      40: '10rem',
-      44: '11rem',
-      48: '12rem',
-      52: '13rem',
-      56: '14rem',
-      60: '15rem',
-      64: '16rem',
-      72: '18rem',
-      80: '20rem',
-      96: '24rem',
-    },
+    }),
     animation: {
       none: 'none',
       spin: 'spin 1s linear infinite',
@@ -177,19 +79,6 @@ module.exports = {
       '2xl': '40px',
       '3xl': '64px',
     },
-    brightness: {
-      0: '0',
-      50: '.5',
-      75: '.75',
-      90: '.9',
-      95: '.95',
-      100: '1',
-      105: '1.05',
-      110: '1.1',
-      125: '1.25',
-      150: '1.5',
-      200: '2',
-    },
     borderColor: ({ theme }) => ({
       ...theme('colors'),
       DEFAULT: theme('colors.gray.200', 'currentColor'),
@@ -227,24 +116,90 @@ module.exports = {
       none: 'none',
     },
     boxShadowColor: ({ theme }) => theme('colors'),
-    caretColor: ({ theme }) => theme('colors'),
-    accentColor: ({ theme }) => ({
-      ...theme('colors'),
-      auto: 'auto',
-    }),
-    contrast: {
+    brightness: {
       0: '0',
       50: '.5',
       75: '.75',
+      90: '.9',
+      95: '.95',
       100: '1',
+      105: '1.05',
+      110: '1.1',
       125: '1.25',
       150: '1.5',
       200: '2',
     },
+    caretColor: ({ theme }) => theme('colors'),
+    colors: ({ colors }) => ({
+      inherit: colors.inherit,
+      current: colors.current,
+      transparent: colors.transparent,
+      black: colors.black,
+      white: colors.white,
+      slate: colors.slate,
+      gray: colors.gray,
+      zinc: colors.zinc,
+      neutral: colors.neutral,
+      stone: colors.stone,
+      red: colors.red,
+      orange: colors.orange,
+      amber: colors.amber,
+      yellow: colors.yellow,
+      lime: colors.lime,
+      green: colors.green,
+      emerald: colors.emerald,
+      teal: colors.teal,
+      cyan: colors.cyan,
+      sky: colors.sky,
+      blue: colors.blue,
+      indigo: colors.indigo,
+      violet: colors.violet,
+      purple: colors.purple,
+      fuchsia: colors.fuchsia,
+      pink: colors.pink,
+      rose: colors.rose,
+    }),
+    columns: {
+      auto: 'auto',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      5: '5',
+      6: '6',
+      7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+      '3xs': '16rem',
+      '2xs': '18rem',
+      xs: '20rem',
+      sm: '24rem',
+      md: '28rem',
+      lg: '32rem',
+      xl: '36rem',
+      '2xl': '42rem',
+      '3xl': '48rem',
+      '4xl': '56rem',
+      '5xl': '64rem',
+      '6xl': '72rem',
+      '7xl': '80rem',
+    },
     container: {},
     content: {
       none: 'none',
     },
+    contrast: {
+      0: '0',
+      50: '.5',
+      75: '.75',
+      100: '1',
+      125: '1.25',
+      150: '1.5',
+      200: '2',
+    },
     cursor: {
       auto: 'auto',
       default: 'default',
@@ -299,22 +254,6 @@ module.exports = {
       none: 'none',
       ...theme('colors'),
     }),
-    grayscale: {
-      0: '0',
-      DEFAULT: '100%',
-    },
-    hueRotate: {
-      0: '0deg',
-      15: '15deg',
-      30: '30deg',
-      60: '60deg',
-      90: '90deg',
-      180: '180deg',
-    },
-    invert: {
-      0: '0',
-      DEFAULT: '100%',
-    },
     flex: {
       1: '1 1 0%',
       auto: '1 1 auto',
@@ -417,6 +356,10 @@ module.exports = {
     },
     gap: ({ theme }) => theme('spacing'),
     gradientColorStops: ({ theme }) => theme('colors'),
+    grayscale: {
+      0: '0',
+      DEFAULT: '100%',
+    },
     gridAutoColumns: {
       auto: 'auto',
       min: 'min-content',
@@ -487,7 +430,7 @@ module.exports = {
       'span-6': 'span 6 / span 6',
       'span-full': '1 / -1',
     },
-    gridRowStart: {
+    gridRowEnd: {
       auto: 'auto',
       1: '1',
       2: '2',
@@ -497,7 +440,7 @@ module.exports = {
       6: '6',
       7: '7',
     },
-    gridRowEnd: {
+    gridRowStart: {
       auto: 'auto',
       1: '1',
       2: '2',
@@ -555,6 +498,14 @@ module.exports = {
       max: 'max-content',
       fit: 'fit-content',
     }),
+    hueRotate: {
+      0: '0deg',
+      15: '15deg',
+      30: '30deg',
+      60: '60deg',
+      90: '90deg',
+      180: '180deg',
+    },
     inset: ({ theme }) => ({
       auto: 'auto',
       ...theme('spacing'),
@@ -566,6 +517,10 @@ module.exports = {
       '3/4': '75%',
       full: '100%',
     }),
+    invert: {
+      0: '0',
+      DEFAULT: '100%',
+    },
     keyframes: {
       spin: {
         to: {
@@ -629,6 +584,7 @@ module.exports = {
     }),
     maxHeight: ({ theme }) => ({
       ...theme('spacing'),
+      none: 'none',
       full: '100%',
       screen: '100vh',
       min: 'min-content',
@@ -716,9 +672,6 @@ module.exports = {
       11: '11',
       12: '12',
     },
-    padding: ({ theme }) => theme('spacing'),
-    placeholderColor: ({ theme }) => theme('colors'),
-    placeholderOpacity: ({ theme }) => theme('opacity'),
     outlineColor: ({ theme }) => theme('colors'),
     outlineOffset: {
       0: '0px',
@@ -734,6 +687,9 @@ module.exports = {
       4: '4px',
       8: '8px',
     },
+    padding: ({ theme }) => theme('spacing'),
+    placeholderColor: ({ theme }) => theme('colors'),
+    placeholderOpacity: ({ theme }) => theme('opacity'),
     ringColor: ({ theme }) => ({
       DEFAULT: theme('colors.blue.500', '#3b82f6'),
       ...theme('colors'),
@@ -788,6 +744,13 @@ module.exports = {
       125: '1.25',
       150: '1.5',
     },
+    screens: {
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      '2xl': '1536px',
+    },
     scrollMargin: ({ theme }) => ({
       ...theme('spacing'),
     }),
@@ -807,6 +770,43 @@ module.exports = {
     space: ({ theme }) => ({
       ...theme('spacing'),
     }),
+    spacing: {
+      px: '1px',
+      0: '0px',
+      0.5: '0.125rem',
+      1: '0.25rem',
+      1.5: '0.375rem',
+      2: '0.5rem',
+      2.5: '0.625rem',
+      3: '0.75rem',
+      3.5: '0.875rem',
+      4: '1rem',
+      5: '1.25rem',
+      6: '1.5rem',
+      7: '1.75rem',
+      8: '2rem',
+      9: '2.25rem',
+      10: '2.5rem',
+      11: '2.75rem',
+      12: '3rem',
+      14: '3.5rem',
+      16: '4rem',
+      20: '5rem',
+      24: '6rem',
+      28: '7rem',
+      32: '8rem',
+      36: '9rem',
+      40: '10rem',
+      44: '11rem',
+      48: '12rem',
+      52: '13rem',
+      56: '14rem',
+      60: '15rem',
+      64: '16rem',
+      72: '18rem',
+      80: '20rem',
+      96: '24rem',
+    },
     stroke: ({ theme }) => ({
       none: 'none',
       ...theme('colors'),
@@ -816,6 +816,8 @@ module.exports = {
       1: '1',
       2: '2',
     },
+    supports: {},
+    data: {},
     textColor: ({ theme }) => theme('colors'),
     textDecorationColor: ({ theme }) => theme('colors'),
     textDecorationThickness: {
@@ -827,6 +829,10 @@ module.exports = {
       4: '4px',
       8: '8px',
     },
+    textIndent: ({ theme }) => ({
+      ...theme('spacing'),
+    }),
+    textOpacity: ({ theme }) => theme('opacity'),
     textUnderlineOffset: {
       auto: 'auto',
       0: '0px',
@@ -835,10 +841,6 @@ module.exports = {
       4: '4px',
       8: '8px',
     },
-    textIndent: ({ theme }) => ({
-      ...theme('spacing'),
-    }),
-    textOpacity: ({ theme }) => theme('opacity'),
     transformOrigin: {
       center: 'center',
       top: 'top',
@@ -875,8 +877,8 @@ module.exports = {
       none: 'none',
       all: 'all',
       DEFAULT:
-        'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
-      colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
+        'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
+      colors: 'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke',
       opacity: 'opacity',
       shadow: 'box-shadow',
       transform: 'transform',
@@ -949,23 +951,5 @@ module.exports = {
       50: '50',
     },
   },
-  variantOrder: [
-    'first',
-    'last',
-    'odd',
-    'even',
-    'visited',
-    'checked',
-    'empty',
-    'read-only',
-    'group-hover',
-    'group-focus',
-    'focus-within',
-    'hover',
-    'focus',
-    'focus-visible',
-    'active',
-    'disabled',
-  ],
   plugins: [],
 }

package/types/config.d.ts

@@ -11,7 +11,7 @@ type KeyValuePair<K extends keyof any = string, V = string> = Record<K, V>
 interface RecursiveKeyValuePair<K extends keyof any = string, V = string> {
   [key: string]: V | RecursiveKeyValuePair<K, V>
 }
-type ResolvableTo<T> = T | ((utils: PluginUtils) => T)
+export type ResolvableTo<T> = T | ((utils: PluginUtils) => T)
 type CSSRuleObject = RecursiveKeyValuePair<string, null | string | string[]>
 
 interface PluginUtils {
@@ -53,6 +53,9 @@ type SafelistConfig =
       variants?: string[]
     }[]
 
+// Blocklist related config
+type BlocklistConfig = string[]
+
 // Presets related config
 type PresetsConfig = Config[]
 
@@ -85,6 +88,7 @@ interface ThemeConfig {
   // Responsiveness
   screens: ResolvableTo<ScreensConfig>
   supports: ResolvableTo<Record<string, string>>
+  data: ResolvableTo<Record<string, string>>
 
   // Reusable base configs
   colors: ResolvableTo<RecursiveKeyValuePair>
@@ -208,7 +212,7 @@ interface ThemeConfig {
   blur: ResolvableTo<KeyValuePair>
   brightness: ResolvableTo<KeyValuePair>
   contrast: ResolvableTo<KeyValuePair>
-  dropShadow: ResolvableTo<KeyValuePair>
+  dropShadow: ResolvableTo<KeyValuePair<string, string | string[]>>
   grayscale: ResolvableTo<KeyValuePair>
   hueRotate: ResolvableTo<KeyValuePair>
   invert: ResolvableTo<KeyValuePair>
@@ -348,6 +352,7 @@ interface OptionalConfig {
   prefix: Partial<PrefixConfig>
   separator: Partial<SeparatorConfig>
   safelist: Partial<SafelistConfig>
+  blocklist: Partial<BlocklistConfig>
   presets: Partial<PresetsConfig>
   future: Partial<FutureConfig>
   experimental: Partial<ExperimentalConfig>

package/types/generated/default-theme.d.ts

@@ -1,74 +1,6 @@
 import { Config } from '../../types'
 type CSSDeclarationList = Record<string, string>
 export type DefaultTheme = Config['theme'] & {
-  screens: Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', string>
-  columns: Record<
-    | '1'
-    | '2'
-    | '3'
-    | '4'
-    | '5'
-    | '6'
-    | '7'
-    | '8'
-    | '9'
-    | '10'
-    | '11'
-    | '12'
-    | 'auto'
-    | '3xs'
-    | '2xs'
-    | 'xs'
-    | 'sm'
-    | 'md'
-    | 'lg'
-    | 'xl'
-    | '2xl'
-    | '3xl'
-    | '4xl'
-    | '5xl'
-    | '6xl'
-    | '7xl',
-    string
-  >
-  spacing: Record<
-    | '0'
-    | '1'
-    | '2'
-    | '3'
-    | '4'
-    | '5'
-    | '6'
-    | '7'
-    | '8'
-    | '9'
-    | '10'
-    | '11'
-    | '12'
-    | '14'
-    | '16'
-    | '20'
-    | '24'
-    | '28'
-    | '32'
-    | '36'
-    | '40'
-    | '44'
-    | '48'
-    | '52'
-    | '56'
-    | '60'
-    | '64'
-    | '72'
-    | '80'
-    | '96'
-    | 'px'
-    | '0.5'
-    | '1.5'
-    | '2.5'
-    | '3.5',
-    string
-  >
   animation: Record<'none' | 'spin' | 'ping' | 'pulse' | 'bounce', string>
   aria: Record<
     | 'checked'
@@ -108,18 +40,47 @@ export type DefaultTheme = Config['theme'] & {
   >
   backgroundSize: Record<'auto' | 'cover' | 'contain', string>
   blur: Record<'0' | 'none' | 'sm' | 'DEFAULT' | 'md' | 'lg' | 'xl' | '2xl' | '3xl', string>
-  brightness: Record<
-    '0' | '50' | '75' | '90' | '95' | '100' | '105' | '110' | '125' | '150' | '200',
-    string
-  >
   borderRadius: Record<
     'none' | 'sm' | 'DEFAULT' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full',
     string
   >
   borderWidth: Record<'0' | '2' | '4' | '8' | 'DEFAULT', string>
   boxShadow: Record<'sm' | 'DEFAULT' | 'md' | 'lg' | 'xl' | '2xl' | 'inner' | 'none', string>
-  contrast: Record<'0' | '50' | '75' | '100' | '125' | '150' | '200', string>
+  brightness: Record<
+    '0' | '50' | '75' | '90' | '95' | '100' | '105' | '110' | '125' | '150' | '200',
+    string
+  >
+  columns: Record<
+    | '1'
+    | '2'
+    | '3'
+    | '4'
+    | '5'
+    | '6'
+    | '7'
+    | '8'
+    | '9'
+    | '10'
+    | '11'
+    | '12'
+    | 'auto'
+    | '3xs'
+    | '2xs'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | '4xl'
+    | '5xl'
+    | '6xl'
+    | '7xl',
+    string
+  >
   content: Record<'none', string>
+  contrast: Record<'0' | '50' | '75' | '100' | '125' | '150' | '200', string>
   cursor: Record<
     | 'auto'
     | 'default'
@@ -160,9 +121,6 @@ export type DefaultTheme = Config['theme'] & {
     string
   >
   dropShadow: Record<'sm' | 'DEFAULT' | 'md' | 'lg' | 'xl' | '2xl' | 'none', string | string[]>
-  grayscale: Record<'0' | 'DEFAULT', string>
-  hueRotate: Record<'0' | '15' | '30' | '60' | '90' | '180', string>
-  invert: Record<'0' | 'DEFAULT', string>
   flex: Record<'1' | 'auto' | 'initial' | 'none', string>
   flexGrow: Record<'0' | 'DEFAULT', string>
   flexShrink: Record<'0' | 'DEFAULT', string>
@@ -195,6 +153,7 @@ export type DefaultTheme = Config['theme'] & {
     | 'black',
     string
   >
+  grayscale: Record<'0' | 'DEFAULT', string>
   gridAutoColumns: Record<'auto' | 'min' | 'max' | 'fr', string>
   gridAutoRows: Record<'auto' | 'min' | 'max' | 'fr', string>
   gridColumn: Record<
@@ -226,13 +185,15 @@ export type DefaultTheme = Config['theme'] & {
     'auto' | 'span-1' | 'span-2' | 'span-3' | 'span-4' | 'span-5' | 'span-6' | 'span-full',
     string
   >
-  gridRowStart: Record<'1' | '2' | '3' | '4' | '5' | '6' | '7' | 'auto', string>
   gridRowEnd: Record<'1' | '2' | '3' | '4' | '5' | '6' | '7' | 'auto', string>
+  gridRowStart: Record<'1' | '2' | '3' | '4' | '5' | '6' | '7' | 'auto', string>
   gridTemplateColumns: Record<
     '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'none',
     string
   >
   gridTemplateRows: Record<'1' | '2' | '3' | '4' | '5' | '6' | 'none', string>
+  hueRotate: Record<'0' | '15' | '30' | '60' | '90' | '180', string>
+  invert: Record<'0' | 'DEFAULT', string>
   keyframes: Record<'spin' | 'ping' | 'pulse' | 'bounce', Record<string, CSSDeclarationList>>
   letterSpacing: Record<'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest', string>
   lineHeight: Record<
@@ -310,8 +271,47 @@ export type DefaultTheme = Config['theme'] & {
   rotate: Record<'0' | '1' | '2' | '3' | '6' | '12' | '45' | '90' | '180', string>
   saturate: Record<'0' | '50' | '100' | '150' | '200', string>
   scale: Record<'0' | '50' | '75' | '90' | '95' | '100' | '105' | '110' | '125' | '150', string>
+  screens: Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', string>
   sepia: Record<'0' | 'DEFAULT', string>
   skew: Record<'0' | '1' | '2' | '3' | '6' | '12', string>
+  spacing: Record<
+    | '0'
+    | '1'
+    | '2'
+    | '3'
+    | '4'
+    | '5'
+    | '6'
+    | '7'
+    | '8'
+    | '9'
+    | '10'
+    | '11'
+    | '12'
+    | '14'
+    | '16'
+    | '20'
+    | '24'
+    | '28'
+    | '32'
+    | '36'
+    | '40'
+    | '44'
+    | '48'
+    | '52'
+    | '56'
+    | '60'
+    | '64'
+    | '72'
+    | '80'
+    | '96'
+    | 'px'
+    | '0.5'
+    | '1.5'
+    | '2.5'
+    | '3.5',
+    string
+  >
   strokeWidth: Record<'0' | '1' | '2', string>
   textDecorationThickness: Record<'0' | '1' | '2' | '4' | '8' | 'auto' | 'from-font', string>
   textUnderlineOffset: Record<'0' | '1' | '2' | '4' | '8' | 'auto', string>