tailwindcss 0.0.0-insiders.bda8421 → 0.0.0-insiders.bdcd708

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (279) hide show
  1. package/README.md +7 -11
  2. package/dist/chunk-5JIJA4QV.mjs +1 -0
  3. package/dist/chunk-C2OYBFIH.mjs +1 -0
  4. package/dist/chunk-DCG7AFIE.mjs +1 -0
  5. package/dist/colors-C__qRT83.d.ts +347 -0
  6. package/dist/colors.d.mts +347 -0
  7. package/dist/colors.d.ts +5 -0
  8. package/dist/colors.js +1 -0
  9. package/dist/colors.mjs +1 -0
  10. package/dist/default-theme.d.mts +1199 -0
  11. package/dist/default-theme.d.ts +1199 -0
  12. package/dist/default-theme.js +1 -0
  13. package/dist/default-theme.mjs +1 -0
  14. package/dist/flatten-color-palette.d.mts +6 -0
  15. package/dist/flatten-color-palette.d.ts +6 -0
  16. package/dist/flatten-color-palette.js +1 -0
  17. package/dist/flatten-color-palette.mjs +1 -0
  18. package/dist/lib.d.mts +379 -0
  19. package/dist/lib.d.ts +3 -0
  20. package/dist/lib.js +38 -0
  21. package/dist/lib.mjs +38 -0
  22. package/dist/plugin.d.mts +11 -0
  23. package/dist/plugin.d.ts +134 -0
  24. package/dist/plugin.js +1 -0
  25. package/dist/plugin.mjs +1 -0
  26. package/dist/resolve-config-B4yBzhca.d.ts +29 -0
  27. package/dist/resolve-config-QUZ9b-Gn.d.mts +190 -0
  28. package/dist/types-DWdTiksJ.d.mts +128 -0
  29. package/index.css +950 -0
  30. package/package.json +76 -105
  31. package/preflight.css +398 -0
  32. package/theme.css +510 -0
  33. package/base.css +0 -1
  34. package/colors.d.ts +0 -3
  35. package/colors.js +0 -2
  36. package/components.css +0 -1
  37. package/defaultConfig.d.ts +0 -3
  38. package/defaultConfig.js +0 -2
  39. package/defaultTheme.d.ts +0 -4
  40. package/defaultTheme.js +0 -2
  41. package/lib/cli/build/deps.js +0 -62
  42. package/lib/cli/build/index.js +0 -54
  43. package/lib/cli/build/plugin.js +0 -371
  44. package/lib/cli/build/utils.js +0 -88
  45. package/lib/cli/build/watching.js +0 -182
  46. package/lib/cli/help/index.js +0 -73
  47. package/lib/cli/index.js +0 -230
  48. package/lib/cli/init/index.js +0 -63
  49. package/lib/cli-peer-dependencies.js +0 -36
  50. package/lib/cli.js +0 -3
  51. package/lib/corePluginList.js +0 -191
  52. package/lib/corePlugins.js +0 -4311
  53. package/lib/css/LICENSE +0 -25
  54. package/lib/css/preflight.css +0 -386
  55. package/lib/featureFlags.js +0 -79
  56. package/lib/index.js +0 -2
  57. package/lib/lib/cacheInvalidation.js +0 -92
  58. package/lib/lib/collapseAdjacentRules.js +0 -61
  59. package/lib/lib/collapseDuplicateDeclarations.js +0 -85
  60. package/lib/lib/content.js +0 -214
  61. package/lib/lib/defaultExtractor.js +0 -251
  62. package/lib/lib/evaluateTailwindFunctions.js +0 -238
  63. package/lib/lib/expandApplyAtRules.js +0 -553
  64. package/lib/lib/expandTailwindAtRules.js +0 -279
  65. package/lib/lib/findAtConfigPath.js +0 -46
  66. package/lib/lib/generateRules.js +0 -904
  67. package/lib/lib/getModuleDependencies.js +0 -99
  68. package/lib/lib/load-config.js +0 -57
  69. package/lib/lib/normalizeTailwindDirectives.js +0 -89
  70. package/lib/lib/offsets.js +0 -355
  71. package/lib/lib/partitionApplyAtRules.js +0 -58
  72. package/lib/lib/regex.js +0 -74
  73. package/lib/lib/remap-bitfield.js +0 -89
  74. package/lib/lib/resolveDefaultsAtRules.js +0 -167
  75. package/lib/lib/setupContextUtils.js +0 -1298
  76. package/lib/lib/setupTrackingContext.js +0 -166
  77. package/lib/lib/sharedState.js +0 -79
  78. package/lib/lib/substituteScreenAtRules.js +0 -31
  79. package/lib/plugin.js +0 -48
  80. package/lib/postcss-plugins/nesting/README.md +0 -42
  81. package/lib/postcss-plugins/nesting/index.js +0 -21
  82. package/lib/postcss-plugins/nesting/plugin.js +0 -89
  83. package/lib/processTailwindFeatures.js +0 -62
  84. package/lib/public/colors.js +0 -355
  85. package/lib/public/create-plugin.js +0 -17
  86. package/lib/public/default-config.js +0 -18
  87. package/lib/public/default-theme.js +0 -18
  88. package/lib/public/load-config.js +0 -12
  89. package/lib/public/resolve-config.js +0 -24
  90. package/lib/util/applyImportantSelector.js +0 -36
  91. package/lib/util/bigSign.js +0 -13
  92. package/lib/util/buildMediaQuery.js +0 -27
  93. package/lib/util/cloneDeep.js +0 -22
  94. package/lib/util/cloneNodes.js +0 -54
  95. package/lib/util/color.js +0 -116
  96. package/lib/util/colorNames.js +0 -752
  97. package/lib/util/configurePlugins.js +0 -23
  98. package/lib/util/createPlugin.js +0 -32
  99. package/lib/util/createUtilityPlugin.js +0 -53
  100. package/lib/util/dataTypes.js +0 -415
  101. package/lib/util/defaults.js +0 -27
  102. package/lib/util/escapeClassName.js +0 -24
  103. package/lib/util/escapeCommas.js +0 -13
  104. package/lib/util/flattenColorPalette.js +0 -18
  105. package/lib/util/formatVariantSelector.js +0 -270
  106. package/lib/util/getAllConfigs.js +0 -50
  107. package/lib/util/hashConfig.js +0 -21
  108. package/lib/util/isKeyframeRule.js +0 -13
  109. package/lib/util/isPlainObject.js +0 -17
  110. package/lib/util/isSyntacticallyValidPropertyValue.js +0 -74
  111. package/lib/util/log.js +0 -61
  112. package/lib/util/nameClass.js +0 -49
  113. package/lib/util/negateValue.js +0 -36
  114. package/lib/util/normalizeConfig.js +0 -282
  115. package/lib/util/normalizeScreens.js +0 -178
  116. package/lib/util/parseAnimationValue.js +0 -93
  117. package/lib/util/parseBoxShadowValue.js +0 -88
  118. package/lib/util/parseDependency.js +0 -47
  119. package/lib/util/parseGlob.js +0 -36
  120. package/lib/util/parseObjectStyles.js +0 -36
  121. package/lib/util/pluginUtils.js +0 -289
  122. package/lib/util/prefixSelector.js +0 -39
  123. package/lib/util/pseudoElements.js +0 -212
  124. package/lib/util/removeAlphaVariables.js +0 -31
  125. package/lib/util/resolveConfig.js +0 -256
  126. package/lib/util/resolveConfigPath.js +0 -70
  127. package/lib/util/responsive.js +0 -24
  128. package/lib/util/splitAtTopLevelOnly.js +0 -51
  129. package/lib/util/tap.js +0 -14
  130. package/lib/util/toColorValue.js +0 -13
  131. package/lib/util/toPath.js +0 -32
  132. package/lib/util/transformThemeValue.js +0 -73
  133. package/lib/util/validateConfig.js +0 -37
  134. package/lib/util/validateFormalSyntax.js +0 -26
  135. package/lib/util/withAlphaVariable.js +0 -79
  136. package/lib/value-parser/LICENSE +0 -22
  137. package/lib/value-parser/README.md +0 -3
  138. package/lib/value-parser/index.d.js +0 -2
  139. package/lib/value-parser/index.js +0 -22
  140. package/lib/value-parser/parse.js +0 -259
  141. package/lib/value-parser/stringify.js +0 -38
  142. package/lib/value-parser/unit.js +0 -86
  143. package/lib/value-parser/walk.js +0 -16
  144. package/loadConfig.d.ts +0 -4
  145. package/loadConfig.js +0 -2
  146. package/nesting/index.d.ts +0 -4
  147. package/nesting/index.js +0 -2
  148. package/peers/index.js +0 -96503
  149. package/plugin.d.ts +0 -11
  150. package/plugin.js +0 -2
  151. package/prettier.config.js +0 -19
  152. package/resolveConfig.d.ts +0 -31
  153. package/resolveConfig.js +0 -2
  154. package/screens.css +0 -1
  155. package/scripts/create-plugin-list.js +0 -10
  156. package/scripts/generate-types.js +0 -104
  157. package/scripts/release-channel.js +0 -18
  158. package/scripts/release-notes.js +0 -21
  159. package/scripts/type-utils.js +0 -27
  160. package/src/cli/build/deps.js +0 -56
  161. package/src/cli/build/index.js +0 -49
  162. package/src/cli/build/plugin.js +0 -437
  163. package/src/cli/build/utils.js +0 -76
  164. package/src/cli/build/watching.js +0 -229
  165. package/src/cli/help/index.js +0 -70
  166. package/src/cli/index.js +0 -216
  167. package/src/cli/init/index.js +0 -79
  168. package/src/cli-peer-dependencies.js +0 -15
  169. package/src/cli.js +0 -3
  170. package/src/corePluginList.js +0 -1
  171. package/src/corePlugins.js +0 -2965
  172. package/src/css/LICENSE +0 -25
  173. package/src/css/preflight.css +0 -386
  174. package/src/featureFlags.js +0 -62
  175. package/src/index.js +0 -1
  176. package/src/lib/cacheInvalidation.js +0 -52
  177. package/src/lib/collapseAdjacentRules.js +0 -58
  178. package/src/lib/collapseDuplicateDeclarations.js +0 -93
  179. package/src/lib/content.js +0 -249
  180. package/src/lib/defaultExtractor.js +0 -230
  181. package/src/lib/evaluateTailwindFunctions.js +0 -272
  182. package/src/lib/expandApplyAtRules.js +0 -637
  183. package/src/lib/expandTailwindAtRules.js +0 -282
  184. package/src/lib/findAtConfigPath.js +0 -48
  185. package/src/lib/generateRules.js +0 -951
  186. package/src/lib/getModuleDependencies.js +0 -79
  187. package/src/lib/load-config.ts +0 -44
  188. package/src/lib/normalizeTailwindDirectives.js +0 -84
  189. package/src/lib/offsets.js +0 -432
  190. package/src/lib/partitionApplyAtRules.js +0 -52
  191. package/src/lib/regex.js +0 -74
  192. package/src/lib/remap-bitfield.js +0 -82
  193. package/src/lib/resolveDefaultsAtRules.js +0 -167
  194. package/src/lib/setupContextUtils.js +0 -1371
  195. package/src/lib/setupTrackingContext.js +0 -169
  196. package/src/lib/sharedState.js +0 -57
  197. package/src/lib/substituteScreenAtRules.js +0 -19
  198. package/src/plugin.js +0 -47
  199. package/src/postcss-plugins/nesting/README.md +0 -42
  200. package/src/postcss-plugins/nesting/index.js +0 -13
  201. package/src/postcss-plugins/nesting/plugin.js +0 -80
  202. package/src/processTailwindFeatures.js +0 -56
  203. package/src/public/colors.js +0 -322
  204. package/src/public/create-plugin.js +0 -2
  205. package/src/public/default-config.js +0 -4
  206. package/src/public/default-theme.js +0 -4
  207. package/src/public/load-config.js +0 -2
  208. package/src/public/resolve-config.js +0 -7
  209. package/src/util/applyImportantSelector.js +0 -27
  210. package/src/util/bigSign.js +0 -3
  211. package/src/util/buildMediaQuery.js +0 -22
  212. package/src/util/cloneDeep.js +0 -11
  213. package/src/util/cloneNodes.js +0 -49
  214. package/src/util/color.js +0 -88
  215. package/src/util/colorNames.js +0 -150
  216. package/src/util/configurePlugins.js +0 -23
  217. package/src/util/createPlugin.js +0 -27
  218. package/src/util/createUtilityPlugin.js +0 -37
  219. package/src/util/dataTypes.js +0 -406
  220. package/src/util/defaults.js +0 -17
  221. package/src/util/escapeClassName.js +0 -8
  222. package/src/util/escapeCommas.js +0 -3
  223. package/src/util/flattenColorPalette.js +0 -13
  224. package/src/util/formatVariantSelector.js +0 -324
  225. package/src/util/getAllConfigs.js +0 -38
  226. package/src/util/hashConfig.js +0 -5
  227. package/src/util/isKeyframeRule.js +0 -3
  228. package/src/util/isPlainObject.js +0 -8
  229. package/src/util/isSyntacticallyValidPropertyValue.js +0 -61
  230. package/src/util/log.js +0 -29
  231. package/src/util/nameClass.js +0 -30
  232. package/src/util/negateValue.js +0 -24
  233. package/src/util/normalizeConfig.js +0 -301
  234. package/src/util/normalizeScreens.js +0 -140
  235. package/src/util/parseAnimationValue.js +0 -68
  236. package/src/util/parseBoxShadowValue.js +0 -72
  237. package/src/util/parseDependency.js +0 -44
  238. package/src/util/parseGlob.js +0 -24
  239. package/src/util/parseObjectStyles.js +0 -19
  240. package/src/util/pluginUtils.js +0 -307
  241. package/src/util/prefixSelector.js +0 -33
  242. package/src/util/pseudoElements.js +0 -171
  243. package/src/util/removeAlphaVariables.js +0 -24
  244. package/src/util/resolveConfig.js +0 -277
  245. package/src/util/resolveConfigPath.js +0 -66
  246. package/src/util/responsive.js +0 -10
  247. package/src/util/splitAtTopLevelOnly.js +0 -52
  248. package/src/util/tap.js +0 -4
  249. package/src/util/toColorValue.js +0 -3
  250. package/src/util/toPath.js +0 -26
  251. package/src/util/transformThemeValue.js +0 -62
  252. package/src/util/validateConfig.js +0 -26
  253. package/src/util/validateFormalSyntax.js +0 -34
  254. package/src/util/withAlphaVariable.js +0 -49
  255. package/src/value-parser/LICENSE +0 -22
  256. package/src/value-parser/README.md +0 -3
  257. package/src/value-parser/index.d.ts +0 -177
  258. package/src/value-parser/index.js +0 -28
  259. package/src/value-parser/parse.js +0 -303
  260. package/src/value-parser/stringify.js +0 -41
  261. package/src/value-parser/unit.js +0 -118
  262. package/src/value-parser/walk.js +0 -18
  263. package/stubs/.gitignore +0 -1
  264. package/stubs/.prettierrc.json +0 -6
  265. package/stubs/config.full.js +0 -1062
  266. package/stubs/config.simple.js +0 -7
  267. package/stubs/postcss.config.cjs +0 -6
  268. package/stubs/postcss.config.js +0 -6
  269. package/stubs/tailwind.config.cjs +0 -2
  270. package/stubs/tailwind.config.js +0 -2
  271. package/stubs/tailwind.config.ts +0 -3
  272. package/tailwind.css +0 -5
  273. package/types/config.d.ts +0 -376
  274. package/types/generated/.gitkeep +0 -0
  275. package/types/generated/colors.d.ts +0 -298
  276. package/types/generated/corePluginList.d.ts +0 -1
  277. package/types/generated/default-theme.d.ts +0 -397
  278. package/types/index.d.ts +0 -11
  279. package/variants.css +0 -1
@@ -1,2965 +0,0 @@
1
- import fs from 'fs'
2
- import * as path from 'path'
3
- import postcss from 'postcss'
4
- import createUtilityPlugin from './util/createUtilityPlugin'
5
- import buildMediaQuery from './util/buildMediaQuery'
6
- import escapeClassName from './util/escapeClassName'
7
- import parseAnimationValue from './util/parseAnimationValue'
8
- import flattenColorPalette from './util/flattenColorPalette'
9
- import withAlphaVariable, { withAlphaValue } from './util/withAlphaVariable'
10
- import toColorValue from './util/toColorValue'
11
- import isPlainObject from './util/isPlainObject'
12
- import transformThemeValue from './util/transformThemeValue'
13
- import { version as tailwindVersion } from '../package.json'
14
- import log from './util/log'
15
- import {
16
- normalizeScreens,
17
- isScreenSortable,
18
- compareScreens,
19
- toScreen,
20
- } from './util/normalizeScreens'
21
- import { formatBoxShadowValue, parseBoxShadowValue } from './util/parseBoxShadowValue'
22
- import { removeAlphaVariables } from './util/removeAlphaVariables'
23
- import { flagEnabled } from './featureFlags'
24
- import { normalize } from './util/dataTypes'
25
- import { INTERNAL_FEATURES } from './lib/setupContextUtils'
26
-
27
- export let variantPlugins = {
28
- childVariant: ({ addVariant }) => {
29
- addVariant('*', '& > *')
30
- },
31
- pseudoElementVariants: ({ addVariant }) => {
32
- addVariant('first-letter', '&::first-letter')
33
- addVariant('first-line', '&::first-line')
34
-
35
- addVariant('marker', [
36
- ({ container }) => {
37
- removeAlphaVariables(container, ['--tw-text-opacity'])
38
-
39
- return '& *::marker'
40
- },
41
- ({ container }) => {
42
- removeAlphaVariables(container, ['--tw-text-opacity'])
43
-
44
- return '&::marker'
45
- },
46
- ])
47
-
48
- addVariant('selection', ['& *::selection', '&::selection'])
49
-
50
- addVariant('file', '&::file-selector-button')
51
-
52
- addVariant('placeholder', '&::placeholder')
53
-
54
- addVariant('backdrop', '&::backdrop')
55
-
56
- addVariant('before', ({ container }) => {
57
- container.walkRules((rule) => {
58
- let foundContent = false
59
- rule.walkDecls('content', () => {
60
- foundContent = true
61
- })
62
-
63
- if (!foundContent) {
64
- rule.prepend(postcss.decl({ prop: 'content', value: 'var(--tw-content)' }))
65
- }
66
- })
67
-
68
- return '&::before'
69
- })
70
-
71
- addVariant('after', ({ container }) => {
72
- container.walkRules((rule) => {
73
- let foundContent = false
74
- rule.walkDecls('content', () => {
75
- foundContent = true
76
- })
77
-
78
- if (!foundContent) {
79
- rule.prepend(postcss.decl({ prop: 'content', value: 'var(--tw-content)' }))
80
- }
81
- })
82
-
83
- return '&::after'
84
- })
85
- },
86
-
87
- pseudoClassVariants: ({ addVariant, matchVariant, config, prefix }) => {
88
- let pseudoVariants = [
89
- // Positional
90
- ['first', '&:first-child'],
91
- ['last', '&:last-child'],
92
- ['only', '&:only-child'],
93
- ['odd', '&:nth-child(odd)'],
94
- ['even', '&:nth-child(even)'],
95
- 'first-of-type',
96
- 'last-of-type',
97
- 'only-of-type',
98
-
99
- // State
100
- [
101
- 'visited',
102
- ({ container }) => {
103
- removeAlphaVariables(container, [
104
- '--tw-text-opacity',
105
- '--tw-border-opacity',
106
- '--tw-bg-opacity',
107
- ])
108
-
109
- return '&:visited'
110
- },
111
- ],
112
- 'target',
113
- ['open', '&[open]'],
114
-
115
- // Forms
116
- 'default',
117
- 'checked',
118
- 'indeterminate',
119
- 'placeholder-shown',
120
- 'autofill',
121
- 'optional',
122
- 'required',
123
- 'valid',
124
- 'invalid',
125
- 'in-range',
126
- 'out-of-range',
127
- 'read-only',
128
-
129
- // Content
130
- 'empty',
131
-
132
- // Interactive
133
- 'focus-within',
134
- [
135
- 'hover',
136
- !flagEnabled(config(), 'hoverOnlyWhenSupported')
137
- ? '&:hover'
138
- : '@media (hover: hover) and (pointer: fine) { &:hover }',
139
- ],
140
- 'focus',
141
- 'focus-visible',
142
- 'active',
143
- 'enabled',
144
- 'disabled',
145
- ].map((variant) => (Array.isArray(variant) ? variant : [variant, `&:${variant}`]))
146
-
147
- for (let [variantName, state] of pseudoVariants) {
148
- addVariant(variantName, (ctx) => {
149
- let result = typeof state === 'function' ? state(ctx) : state
150
-
151
- return result
152
- })
153
- }
154
-
155
- let variants = {
156
- group: (_, { modifier }) =>
157
- modifier
158
- ? [`:merge(${prefix('.group')}\\/${escapeClassName(modifier)})`, ' &']
159
- : [`:merge(${prefix('.group')})`, ' &'],
160
- peer: (_, { modifier }) =>
161
- modifier
162
- ? [`:merge(${prefix('.peer')}\\/${escapeClassName(modifier)})`, ' ~ &']
163
- : [`:merge(${prefix('.peer')})`, ' ~ &'],
164
- }
165
-
166
- for (let [name, fn] of Object.entries(variants)) {
167
- matchVariant(
168
- name,
169
- (value = '', extra) => {
170
- let result = normalize(typeof value === 'function' ? value(extra) : value)
171
- if (!result.includes('&')) result = '&' + result
172
-
173
- let [a, b] = fn('', extra)
174
-
175
- let start = null
176
- let end = null
177
- let quotes = 0
178
-
179
- for (let i = 0; i < result.length; ++i) {
180
- let c = result[i]
181
- if (c === '&') {
182
- start = i
183
- } else if (c === "'" || c === '"') {
184
- quotes += 1
185
- } else if (start !== null && c === ' ' && !quotes) {
186
- end = i
187
- }
188
- }
189
-
190
- if (start !== null && end === null) {
191
- end = result.length
192
- }
193
-
194
- // Basically this but can handle quotes:
195
- // result.replace(/&(\S+)?/g, (_, pseudo = '') => a + pseudo + b)
196
-
197
- return result.slice(0, start) + a + result.slice(start + 1, end) + b + result.slice(end)
198
- },
199
- {
200
- values: Object.fromEntries(pseudoVariants),
201
- [INTERNAL_FEATURES]: {
202
- respectPrefix: false,
203
- },
204
- }
205
- )
206
- }
207
- },
208
-
209
- directionVariants: ({ addVariant }) => {
210
- addVariant('ltr', '&:where([dir="ltr"], [dir="ltr"] *)')
211
- addVariant('rtl', '&:where([dir="rtl"], [dir="rtl"] *)')
212
- },
213
-
214
- reducedMotionVariants: ({ addVariant }) => {
215
- addVariant('motion-safe', '@media (prefers-reduced-motion: no-preference)')
216
- addVariant('motion-reduce', '@media (prefers-reduced-motion: reduce)')
217
- },
218
-
219
- darkVariants: ({ config, addVariant }) => {
220
- let [mode, selector = '.dark'] = [].concat(config('darkMode', 'media'))
221
-
222
- if (mode === false) {
223
- mode = 'media'
224
- log.warn('darkmode-false', [
225
- 'The `darkMode` option in your Tailwind CSS configuration is set to `false`, which now behaves the same as `media`.',
226
- 'Change `darkMode` to `media` or remove it entirely.',
227
- 'https://tailwindcss.com/docs/upgrade-guide#remove-dark-mode-configuration',
228
- ])
229
- }
230
-
231
- if (mode === 'variant') {
232
- let formats
233
- if (Array.isArray(selector)) {
234
- formats = selector
235
- } else if (typeof selector === 'function') {
236
- formats = selector
237
- } else if (typeof selector === 'string') {
238
- formats = [selector]
239
- }
240
-
241
- // TODO: We could also add these warnings if the user passes a function that returns string | string[]
242
- // But this is an advanced enough use case that it's probably not necessary
243
- if (Array.isArray(formats)) {
244
- for (let format of formats) {
245
- if (format === '.dark') {
246
- mode = false
247
- log.warn('darkmode-variant-without-selector', [
248
- 'When using `variant` for `darkMode`, you must provide a selector.',
249
- 'Example: `darkMode: ["variant", ".your-selector &"]`',
250
- ])
251
- } else if (!format.includes('&')) {
252
- mode = false
253
- log.warn('darkmode-variant-without-ampersand', [
254
- 'When using `variant` for `darkMode`, your selector must contain `&`.',
255
- 'Example `darkMode: ["variant", ".your-selector &"]`',
256
- ])
257
- }
258
- }
259
- }
260
-
261
- selector = formats
262
- }
263
-
264
- if (mode === 'selector') {
265
- // New preferred behavior
266
- addVariant('dark', `&:where(${selector}, ${selector} *)`)
267
- } else if (mode === 'media') {
268
- addVariant('dark', '@media (prefers-color-scheme: dark)')
269
- } else if (mode === 'variant') {
270
- addVariant('dark', selector)
271
- } else if (mode === 'class') {
272
- // Old behavior
273
- addVariant('dark', `:is(${selector} &)`)
274
- }
275
- },
276
-
277
- printVariant: ({ addVariant }) => {
278
- addVariant('print', '@media print')
279
- },
280
-
281
- screenVariants: ({ theme, addVariant, matchVariant }) => {
282
- let rawScreens = theme('screens') ?? {}
283
- let areSimpleScreens = Object.values(rawScreens).every((v) => typeof v === 'string')
284
- let screens = normalizeScreens(theme('screens'))
285
-
286
- /** @type {Set<string>} */
287
- let unitCache = new Set([])
288
-
289
- /** @param {string} value */
290
- function units(value) {
291
- return value.match(/(\D+)$/)?.[1] ?? '(none)'
292
- }
293
-
294
- /** @param {string} value */
295
- function recordUnits(value) {
296
- if (value !== undefined) {
297
- unitCache.add(units(value))
298
- }
299
- }
300
-
301
- /** @param {string} value */
302
- function canUseUnits(value) {
303
- recordUnits(value)
304
-
305
- // If the cache was empty it'll become 1 because we've just added the current unit
306
- // If the cache was not empty and the units are the same the size doesn't change
307
- // Otherwise, if the units are different from what is already known the size will always be > 1
308
- return unitCache.size === 1
309
- }
310
-
311
- for (const screen of screens) {
312
- for (const value of screen.values) {
313
- recordUnits(value.min)
314
- recordUnits(value.max)
315
- }
316
- }
317
-
318
- let screensUseConsistentUnits = unitCache.size <= 1
319
-
320
- /**
321
- * @typedef {import('./util/normalizeScreens').Screen} Screen
322
- */
323
-
324
- /**
325
- * @param {'min' | 'max'} type
326
- * @returns {Record<string, Screen>}
327
- */
328
- function buildScreenValues(type) {
329
- return Object.fromEntries(
330
- screens
331
- .filter((screen) => isScreenSortable(screen).result)
332
- .map((screen) => {
333
- let { min, max } = screen.values[0]
334
-
335
- if (type === 'min' && min !== undefined) {
336
- return screen
337
- } else if (type === 'min' && max !== undefined) {
338
- return { ...screen, not: !screen.not }
339
- } else if (type === 'max' && max !== undefined) {
340
- return screen
341
- } else if (type === 'max' && min !== undefined) {
342
- return { ...screen, not: !screen.not }
343
- }
344
- })
345
- .map((screen) => [screen.name, screen])
346
- )
347
- }
348
-
349
- /**
350
- * @param {'min' | 'max'} type
351
- * @returns {(a: { value: string | Screen }, z: { value: string | Screen }) => number}
352
- */
353
- function buildSort(type) {
354
- return (a, z) => compareScreens(type, a.value, z.value)
355
- }
356
-
357
- let maxSort = buildSort('max')
358
- let minSort = buildSort('min')
359
-
360
- /** @param {'min'|'max'} type */
361
- function buildScreenVariant(type) {
362
- return (value) => {
363
- if (!areSimpleScreens) {
364
- log.warn('complex-screen-config', [
365
- 'The `min-*` and `max-*` variants are not supported with a `screens` configuration containing objects.',
366
- ])
367
-
368
- return []
369
- } else if (!screensUseConsistentUnits) {
370
- log.warn('mixed-screen-units', [
371
- 'The `min-*` and `max-*` variants are not supported with a `screens` configuration containing mixed units.',
372
- ])
373
-
374
- return []
375
- } else if (typeof value === 'string' && !canUseUnits(value)) {
376
- log.warn('minmax-have-mixed-units', [
377
- 'The `min-*` and `max-*` variants are not supported with a `screens` configuration containing mixed units.',
378
- ])
379
-
380
- return []
381
- }
382
-
383
- return [`@media ${buildMediaQuery(toScreen(value, type))}`]
384
- }
385
- }
386
-
387
- matchVariant('max', buildScreenVariant('max'), {
388
- sort: maxSort,
389
- values: areSimpleScreens ? buildScreenValues('max') : {},
390
- })
391
-
392
- // screens and min-* are sorted together when they can be
393
- let id = 'min-screens'
394
- for (let screen of screens) {
395
- addVariant(screen.name, `@media ${buildMediaQuery(screen)}`, {
396
- id,
397
- sort: areSimpleScreens && screensUseConsistentUnits ? minSort : undefined,
398
- value: screen,
399
- })
400
- }
401
-
402
- matchVariant('min', buildScreenVariant('min'), {
403
- id,
404
- sort: minSort,
405
- })
406
- },
407
-
408
- supportsVariants: ({ matchVariant, theme }) => {
409
- matchVariant(
410
- 'supports',
411
- (value = '') => {
412
- let check = normalize(value)
413
- let isRaw = /^\w*\s*\(/.test(check)
414
-
415
- // Chrome has a bug where `(condtion1)or(condition2)` is not valid
416
- // But `(condition1) or (condition2)` is supported.
417
- check = isRaw ? check.replace(/\b(and|or|not)\b/g, ' $1 ') : check
418
-
419
- if (isRaw) {
420
- return `@supports ${check}`
421
- }
422
-
423
- if (!check.includes(':')) {
424
- check = `${check}: var(--tw)`
425
- }
426
-
427
- if (!(check.startsWith('(') && check.endsWith(')'))) {
428
- check = `(${check})`
429
- }
430
-
431
- return `@supports ${check}`
432
- },
433
- { values: theme('supports') ?? {} }
434
- )
435
- },
436
-
437
- hasVariants: ({ matchVariant }) => {
438
- matchVariant('has', (value) => `&:has(${normalize(value)})`, { values: {} })
439
- matchVariant(
440
- 'group-has',
441
- (value, { modifier }) =>
442
- modifier
443
- ? `:merge(.group\\/${modifier}):has(${normalize(value)}) &`
444
- : `:merge(.group):has(${normalize(value)}) &`,
445
- { values: {} }
446
- )
447
- matchVariant(
448
- 'peer-has',
449
- (value, { modifier }) =>
450
- modifier
451
- ? `:merge(.peer\\/${modifier}):has(${normalize(value)}) ~ &`
452
- : `:merge(.peer):has(${normalize(value)}) ~ &`,
453
- { values: {} }
454
- )
455
- },
456
-
457
- ariaVariants: ({ matchVariant, theme }) => {
458
- matchVariant('aria', (value) => `&[aria-${normalize(value)}]`, { values: theme('aria') ?? {} })
459
- matchVariant(
460
- 'group-aria',
461
- (value, { modifier }) =>
462
- modifier
463
- ? `:merge(.group\\/${modifier})[aria-${normalize(value)}] &`
464
- : `:merge(.group)[aria-${normalize(value)}] &`,
465
- { values: theme('aria') ?? {} }
466
- )
467
- matchVariant(
468
- 'peer-aria',
469
- (value, { modifier }) =>
470
- modifier
471
- ? `:merge(.peer\\/${modifier})[aria-${normalize(value)}] ~ &`
472
- : `:merge(.peer)[aria-${normalize(value)}] ~ &`,
473
- { values: theme('aria') ?? {} }
474
- )
475
- },
476
-
477
- dataVariants: ({ matchVariant, theme }) => {
478
- matchVariant('data', (value) => `&[data-${normalize(value)}]`, { values: theme('data') ?? {} })
479
- matchVariant(
480
- 'group-data',
481
- (value, { modifier }) =>
482
- modifier
483
- ? `:merge(.group\\/${modifier})[data-${normalize(value)}] &`
484
- : `:merge(.group)[data-${normalize(value)}] &`,
485
- { values: theme('data') ?? {} }
486
- )
487
- matchVariant(
488
- 'peer-data',
489
- (value, { modifier }) =>
490
- modifier
491
- ? `:merge(.peer\\/${modifier})[data-${normalize(value)}] ~ &`
492
- : `:merge(.peer)[data-${normalize(value)}] ~ &`,
493
- { values: theme('data') ?? {} }
494
- )
495
- },
496
-
497
- orientationVariants: ({ addVariant }) => {
498
- addVariant('portrait', '@media (orientation: portrait)')
499
- addVariant('landscape', '@media (orientation: landscape)')
500
- },
501
-
502
- prefersContrastVariants: ({ addVariant }) => {
503
- addVariant('contrast-more', '@media (prefers-contrast: more)')
504
- addVariant('contrast-less', '@media (prefers-contrast: less)')
505
- },
506
-
507
- forcedColorsVariants: ({ addVariant }) => {
508
- addVariant('forced-colors', '@media (forced-colors: active)')
509
- },
510
- }
511
-
512
- let cssTransformValue = [
513
- 'translate(var(--tw-translate-x), var(--tw-translate-y))',
514
- 'rotate(var(--tw-rotate))',
515
- 'skewX(var(--tw-skew-x))',
516
- 'skewY(var(--tw-skew-y))',
517
- 'scaleX(var(--tw-scale-x))',
518
- 'scaleY(var(--tw-scale-y))',
519
- ].join(' ')
520
-
521
- let cssFilterValue = [
522
- 'var(--tw-blur)',
523
- 'var(--tw-brightness)',
524
- 'var(--tw-contrast)',
525
- 'var(--tw-grayscale)',
526
- 'var(--tw-hue-rotate)',
527
- 'var(--tw-invert)',
528
- 'var(--tw-saturate)',
529
- 'var(--tw-sepia)',
530
- 'var(--tw-drop-shadow)',
531
- ].join(' ')
532
-
533
- let cssBackdropFilterValue = [
534
- 'var(--tw-backdrop-blur)',
535
- 'var(--tw-backdrop-brightness)',
536
- 'var(--tw-backdrop-contrast)',
537
- 'var(--tw-backdrop-grayscale)',
538
- 'var(--tw-backdrop-hue-rotate)',
539
- 'var(--tw-backdrop-invert)',
540
- 'var(--tw-backdrop-opacity)',
541
- 'var(--tw-backdrop-saturate)',
542
- 'var(--tw-backdrop-sepia)',
543
- ].join(' ')
544
-
545
- export let corePlugins = {
546
- preflight: ({ addBase }) => {
547
- let preflightStyles = postcss.parse(
548
- fs.readFileSync(path.join(__dirname, './css/preflight.css'), 'utf8')
549
- )
550
-
551
- addBase([
552
- postcss.comment({
553
- text: `! tailwindcss v${tailwindVersion} | MIT License | https://tailwindcss.com`,
554
- }),
555
- ...preflightStyles.nodes,
556
- ])
557
- },
558
-
559
- container: (() => {
560
- function extractMinWidths(breakpoints = []) {
561
- return breakpoints
562
- .flatMap((breakpoint) => breakpoint.values.map((breakpoint) => breakpoint.min))
563
- .filter((v) => v !== undefined)
564
- }
565
-
566
- function mapMinWidthsToPadding(minWidths, screens, paddings) {
567
- if (typeof paddings === 'undefined') {
568
- return []
569
- }
570
-
571
- if (!(typeof paddings === 'object' && paddings !== null)) {
572
- return [
573
- {
574
- screen: 'DEFAULT',
575
- minWidth: 0,
576
- padding: paddings,
577
- },
578
- ]
579
- }
580
-
581
- let mapping = []
582
-
583
- if (paddings.DEFAULT) {
584
- mapping.push({
585
- screen: 'DEFAULT',
586
- minWidth: 0,
587
- padding: paddings.DEFAULT,
588
- })
589
- }
590
-
591
- for (let minWidth of minWidths) {
592
- for (let screen of screens) {
593
- for (let { min } of screen.values) {
594
- if (min === minWidth) {
595
- mapping.push({ minWidth, padding: paddings[screen.name] })
596
- }
597
- }
598
- }
599
- }
600
-
601
- return mapping
602
- }
603
-
604
- return function ({ addComponents, theme }) {
605
- let screens = normalizeScreens(theme('container.screens', theme('screens')))
606
- let minWidths = extractMinWidths(screens)
607
- let paddings = mapMinWidthsToPadding(minWidths, screens, theme('container.padding'))
608
-
609
- let generatePaddingFor = (minWidth) => {
610
- let paddingConfig = paddings.find((padding) => padding.minWidth === minWidth)
611
-
612
- if (!paddingConfig) {
613
- return {}
614
- }
615
-
616
- return {
617
- paddingRight: paddingConfig.padding,
618
- paddingLeft: paddingConfig.padding,
619
- }
620
- }
621
-
622
- let atRules = Array.from(
623
- new Set(minWidths.slice().sort((a, z) => parseInt(a) - parseInt(z)))
624
- ).map((minWidth) => ({
625
- [`@media (min-width: ${minWidth})`]: {
626
- '.container': {
627
- 'max-width': minWidth,
628
- ...generatePaddingFor(minWidth),
629
- },
630
- },
631
- }))
632
-
633
- addComponents([
634
- {
635
- '.container': Object.assign(
636
- { width: '100%' },
637
- theme('container.center', false) ? { marginRight: 'auto', marginLeft: 'auto' } : {},
638
- generatePaddingFor(0)
639
- ),
640
- },
641
- ...atRules,
642
- ])
643
- }
644
- })(),
645
-
646
- accessibility: ({ addUtilities }) => {
647
- addUtilities({
648
- '.sr-only': {
649
- position: 'absolute',
650
- width: '1px',
651
- height: '1px',
652
- padding: '0',
653
- margin: '-1px',
654
- overflow: 'hidden',
655
- clip: 'rect(0, 0, 0, 0)',
656
- whiteSpace: 'nowrap',
657
- borderWidth: '0',
658
- },
659
- '.not-sr-only': {
660
- position: 'static',
661
- width: 'auto',
662
- height: 'auto',
663
- padding: '0',
664
- margin: '0',
665
- overflow: 'visible',
666
- clip: 'auto',
667
- whiteSpace: 'normal',
668
- },
669
- })
670
- },
671
-
672
- pointerEvents: ({ addUtilities }) => {
673
- addUtilities({
674
- '.pointer-events-none': { 'pointer-events': 'none' },
675
- '.pointer-events-auto': { 'pointer-events': 'auto' },
676
- })
677
- },
678
-
679
- visibility: ({ addUtilities }) => {
680
- addUtilities({
681
- '.visible': { visibility: 'visible' },
682
- '.invisible': { visibility: 'hidden' },
683
- '.collapse': { visibility: 'collapse' },
684
- })
685
- },
686
-
687
- position: ({ addUtilities }) => {
688
- addUtilities({
689
- '.static': { position: 'static' },
690
- '.fixed': { position: 'fixed' },
691
- '.absolute': { position: 'absolute' },
692
- '.relative': { position: 'relative' },
693
- '.sticky': { position: 'sticky' },
694
- })
695
- },
696
-
697
- inset: createUtilityPlugin(
698
- 'inset',
699
- [
700
- ['inset', ['inset']],
701
- [
702
- ['inset-x', ['left', 'right']],
703
- ['inset-y', ['top', 'bottom']],
704
- ],
705
- [
706
- ['start', ['inset-inline-start']],
707
- ['end', ['inset-inline-end']],
708
- ['top', ['top']],
709
- ['right', ['right']],
710
- ['bottom', ['bottom']],
711
- ['left', ['left']],
712
- ],
713
- ],
714
- { supportsNegativeValues: true }
715
- ),
716
-
717
- isolation: ({ addUtilities }) => {
718
- addUtilities({
719
- '.isolate': { isolation: 'isolate' },
720
- '.isolation-auto': { isolation: 'auto' },
721
- })
722
- },
723
-
724
- zIndex: createUtilityPlugin('zIndex', [['z', ['zIndex']]], { supportsNegativeValues: true }),
725
- order: createUtilityPlugin('order', undefined, { supportsNegativeValues: true }),
726
- gridColumn: createUtilityPlugin('gridColumn', [['col', ['gridColumn']]]),
727
- gridColumnStart: createUtilityPlugin('gridColumnStart', [['col-start', ['gridColumnStart']]]),
728
- gridColumnEnd: createUtilityPlugin('gridColumnEnd', [['col-end', ['gridColumnEnd']]]),
729
- gridRow: createUtilityPlugin('gridRow', [['row', ['gridRow']]]),
730
- gridRowStart: createUtilityPlugin('gridRowStart', [['row-start', ['gridRowStart']]]),
731
- gridRowEnd: createUtilityPlugin('gridRowEnd', [['row-end', ['gridRowEnd']]]),
732
-
733
- float: ({ addUtilities }) => {
734
- addUtilities({
735
- '.float-start': { float: 'inline-start' },
736
- '.float-end': { float: 'inline-end' },
737
- '.float-right': { float: 'right' },
738
- '.float-left': { float: 'left' },
739
- '.float-none': { float: 'none' },
740
- })
741
- },
742
-
743
- clear: ({ addUtilities }) => {
744
- addUtilities({
745
- '.clear-start': { clear: 'inline-start' },
746
- '.clear-end': { clear: 'inline-end' },
747
- '.clear-left': { clear: 'left' },
748
- '.clear-right': { clear: 'right' },
749
- '.clear-both': { clear: 'both' },
750
- '.clear-none': { clear: 'none' },
751
- })
752
- },
753
-
754
- margin: createUtilityPlugin(
755
- 'margin',
756
- [
757
- ['m', ['margin']],
758
- [
759
- ['mx', ['margin-left', 'margin-right']],
760
- ['my', ['margin-top', 'margin-bottom']],
761
- ],
762
- [
763
- ['ms', ['margin-inline-start']],
764
- ['me', ['margin-inline-end']],
765
- ['mt', ['margin-top']],
766
- ['mr', ['margin-right']],
767
- ['mb', ['margin-bottom']],
768
- ['ml', ['margin-left']],
769
- ],
770
- ],
771
- { supportsNegativeValues: true }
772
- ),
773
-
774
- boxSizing: ({ addUtilities }) => {
775
- addUtilities({
776
- '.box-border': { 'box-sizing': 'border-box' },
777
- '.box-content': { 'box-sizing': 'content-box' },
778
- })
779
- },
780
-
781
- lineClamp: ({ matchUtilities, addUtilities, theme }) => {
782
- matchUtilities(
783
- {
784
- 'line-clamp': (value) => ({
785
- overflow: 'hidden',
786
- display: '-webkit-box',
787
- '-webkit-box-orient': 'vertical',
788
- '-webkit-line-clamp': `${value}`,
789
- }),
790
- },
791
- { values: theme('lineClamp') }
792
- )
793
-
794
- addUtilities({
795
- '.line-clamp-none': {
796
- overflow: 'visible',
797
- display: 'block',
798
- '-webkit-box-orient': 'horizontal',
799
- '-webkit-line-clamp': 'none',
800
- },
801
- })
802
- },
803
-
804
- display: ({ addUtilities }) => {
805
- addUtilities({
806
- '.block': { display: 'block' },
807
- '.inline-block': { display: 'inline-block' },
808
- '.inline': { display: 'inline' },
809
- '.flex': { display: 'flex' },
810
- '.inline-flex': { display: 'inline-flex' },
811
- '.table': { display: 'table' },
812
- '.inline-table': { display: 'inline-table' },
813
- '.table-caption': { display: 'table-caption' },
814
- '.table-cell': { display: 'table-cell' },
815
- '.table-column': { display: 'table-column' },
816
- '.table-column-group': { display: 'table-column-group' },
817
- '.table-footer-group': { display: 'table-footer-group' },
818
- '.table-header-group': { display: 'table-header-group' },
819
- '.table-row-group': { display: 'table-row-group' },
820
- '.table-row': { display: 'table-row' },
821
- '.flow-root': { display: 'flow-root' },
822
- '.grid': { display: 'grid' },
823
- '.inline-grid': { display: 'inline-grid' },
824
- '.contents': { display: 'contents' },
825
- '.list-item': { display: 'list-item' },
826
- '.hidden': { display: 'none' },
827
- })
828
- },
829
-
830
- aspectRatio: createUtilityPlugin('aspectRatio', [['aspect', ['aspect-ratio']]]),
831
-
832
- size: createUtilityPlugin('size', [['size', ['width', 'height']]]),
833
-
834
- height: createUtilityPlugin('height', [['h', ['height']]]),
835
- maxHeight: createUtilityPlugin('maxHeight', [['max-h', ['maxHeight']]]),
836
- minHeight: createUtilityPlugin('minHeight', [['min-h', ['minHeight']]]),
837
-
838
- width: createUtilityPlugin('width', [['w', ['width']]]),
839
- minWidth: createUtilityPlugin('minWidth', [['min-w', ['minWidth']]]),
840
- maxWidth: createUtilityPlugin('maxWidth', [['max-w', ['maxWidth']]]),
841
-
842
- flex: createUtilityPlugin('flex'),
843
- flexShrink: createUtilityPlugin('flexShrink', [
844
- ['flex-shrink', ['flex-shrink']], // Deprecated
845
- ['shrink', ['flex-shrink']],
846
- ]),
847
- flexGrow: createUtilityPlugin('flexGrow', [
848
- ['flex-grow', ['flex-grow']], // Deprecated
849
- ['grow', ['flex-grow']],
850
- ]),
851
- flexBasis: createUtilityPlugin('flexBasis', [['basis', ['flex-basis']]]),
852
-
853
- tableLayout: ({ addUtilities }) => {
854
- addUtilities({
855
- '.table-auto': { 'table-layout': 'auto' },
856
- '.table-fixed': { 'table-layout': 'fixed' },
857
- })
858
- },
859
-
860
- captionSide: ({ addUtilities }) => {
861
- addUtilities({
862
- '.caption-top': { 'caption-side': 'top' },
863
- '.caption-bottom': { 'caption-side': 'bottom' },
864
- })
865
- },
866
-
867
- borderCollapse: ({ addUtilities }) => {
868
- addUtilities({
869
- '.border-collapse': { 'border-collapse': 'collapse' },
870
- '.border-separate': { 'border-collapse': 'separate' },
871
- })
872
- },
873
-
874
- borderSpacing: ({ addDefaults, matchUtilities, theme }) => {
875
- addDefaults('border-spacing', {
876
- '--tw-border-spacing-x': 0,
877
- '--tw-border-spacing-y': 0,
878
- })
879
-
880
- matchUtilities(
881
- {
882
- 'border-spacing': (value) => {
883
- return {
884
- '--tw-border-spacing-x': value,
885
- '--tw-border-spacing-y': value,
886
- '@defaults border-spacing': {},
887
- 'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
888
- }
889
- },
890
- 'border-spacing-x': (value) => {
891
- return {
892
- '--tw-border-spacing-x': value,
893
- '@defaults border-spacing': {},
894
- 'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
895
- }
896
- },
897
- 'border-spacing-y': (value) => {
898
- return {
899
- '--tw-border-spacing-y': value,
900
- '@defaults border-spacing': {},
901
- 'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
902
- }
903
- },
904
- },
905
- { values: theme('borderSpacing') }
906
- )
907
- },
908
-
909
- transformOrigin: createUtilityPlugin('transformOrigin', [['origin', ['transformOrigin']]]),
910
- translate: createUtilityPlugin(
911
- 'translate',
912
- [
913
- [
914
- [
915
- 'translate-x',
916
- [['@defaults transform', {}], '--tw-translate-x', ['transform', cssTransformValue]],
917
- ],
918
- [
919
- 'translate-y',
920
- [['@defaults transform', {}], '--tw-translate-y', ['transform', cssTransformValue]],
921
- ],
922
- ],
923
- ],
924
- { supportsNegativeValues: true }
925
- ),
926
- rotate: createUtilityPlugin(
927
- 'rotate',
928
- [['rotate', [['@defaults transform', {}], '--tw-rotate', ['transform', cssTransformValue]]]],
929
- { supportsNegativeValues: true }
930
- ),
931
- skew: createUtilityPlugin(
932
- 'skew',
933
- [
934
- [
935
- ['skew-x', [['@defaults transform', {}], '--tw-skew-x', ['transform', cssTransformValue]]],
936
- ['skew-y', [['@defaults transform', {}], '--tw-skew-y', ['transform', cssTransformValue]]],
937
- ],
938
- ],
939
- { supportsNegativeValues: true }
940
- ),
941
- scale: createUtilityPlugin(
942
- 'scale',
943
- [
944
- [
945
- 'scale',
946
- [
947
- ['@defaults transform', {}],
948
- '--tw-scale-x',
949
- '--tw-scale-y',
950
- ['transform', cssTransformValue],
951
- ],
952
- ],
953
- [
954
- [
955
- 'scale-x',
956
- [['@defaults transform', {}], '--tw-scale-x', ['transform', cssTransformValue]],
957
- ],
958
- [
959
- 'scale-y',
960
- [['@defaults transform', {}], '--tw-scale-y', ['transform', cssTransformValue]],
961
- ],
962
- ],
963
- ],
964
- { supportsNegativeValues: true }
965
- ),
966
-
967
- transform: ({ addDefaults, addUtilities }) => {
968
- addDefaults('transform', {
969
- '--tw-translate-x': '0',
970
- '--tw-translate-y': '0',
971
- '--tw-rotate': '0',
972
- '--tw-skew-x': '0',
973
- '--tw-skew-y': '0',
974
- '--tw-scale-x': '1',
975
- '--tw-scale-y': '1',
976
- })
977
-
978
- addUtilities({
979
- '.transform': { '@defaults transform': {}, transform: cssTransformValue },
980
- '.transform-cpu': {
981
- transform: cssTransformValue,
982
- },
983
- '.transform-gpu': {
984
- transform: cssTransformValue.replace(
985
- 'translate(var(--tw-translate-x), var(--tw-translate-y))',
986
- 'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)'
987
- ),
988
- },
989
- '.transform-none': { transform: 'none' },
990
- })
991
- },
992
-
993
- animation: ({ matchUtilities, theme, config }) => {
994
- let prefixName = (name) => escapeClassName(config('prefix') + name)
995
- let keyframes = Object.fromEntries(
996
- Object.entries(theme('keyframes') ?? {}).map(([key, value]) => {
997
- return [key, { [`@keyframes ${prefixName(key)}`]: value }]
998
- })
999
- )
1000
-
1001
- matchUtilities(
1002
- {
1003
- animate: (value) => {
1004
- let animations = parseAnimationValue(value)
1005
-
1006
- return [
1007
- ...animations.flatMap((animation) => keyframes[animation.name]),
1008
- {
1009
- animation: animations
1010
- .map(({ name, value }) => {
1011
- if (name === undefined || keyframes[name] === undefined) {
1012
- return value
1013
- }
1014
- return value.replace(name, prefixName(name))
1015
- })
1016
- .join(', '),
1017
- },
1018
- ]
1019
- },
1020
- },
1021
- { values: theme('animation') }
1022
- )
1023
- },
1024
-
1025
- cursor: createUtilityPlugin('cursor'),
1026
-
1027
- touchAction: ({ addDefaults, addUtilities }) => {
1028
- addDefaults('touch-action', {
1029
- '--tw-pan-x': ' ',
1030
- '--tw-pan-y': ' ',
1031
- '--tw-pinch-zoom': ' ',
1032
- })
1033
-
1034
- let cssTouchActionValue = 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)'
1035
-
1036
- addUtilities({
1037
- '.touch-auto': { 'touch-action': 'auto' },
1038
- '.touch-none': { 'touch-action': 'none' },
1039
- '.touch-pan-x': {
1040
- '@defaults touch-action': {},
1041
- '--tw-pan-x': 'pan-x',
1042
- 'touch-action': cssTouchActionValue,
1043
- },
1044
- '.touch-pan-left': {
1045
- '@defaults touch-action': {},
1046
- '--tw-pan-x': 'pan-left',
1047
- 'touch-action': cssTouchActionValue,
1048
- },
1049
- '.touch-pan-right': {
1050
- '@defaults touch-action': {},
1051
- '--tw-pan-x': 'pan-right',
1052
- 'touch-action': cssTouchActionValue,
1053
- },
1054
- '.touch-pan-y': {
1055
- '@defaults touch-action': {},
1056
- '--tw-pan-y': 'pan-y',
1057
- 'touch-action': cssTouchActionValue,
1058
- },
1059
- '.touch-pan-up': {
1060
- '@defaults touch-action': {},
1061
- '--tw-pan-y': 'pan-up',
1062
- 'touch-action': cssTouchActionValue,
1063
- },
1064
- '.touch-pan-down': {
1065
- '@defaults touch-action': {},
1066
- '--tw-pan-y': 'pan-down',
1067
- 'touch-action': cssTouchActionValue,
1068
- },
1069
- '.touch-pinch-zoom': {
1070
- '@defaults touch-action': {},
1071
- '--tw-pinch-zoom': 'pinch-zoom',
1072
- 'touch-action': cssTouchActionValue,
1073
- },
1074
- '.touch-manipulation': { 'touch-action': 'manipulation' },
1075
- })
1076
- },
1077
-
1078
- userSelect: ({ addUtilities }) => {
1079
- addUtilities({
1080
- '.select-none': { 'user-select': 'none' },
1081
- '.select-text': { 'user-select': 'text' },
1082
- '.select-all': { 'user-select': 'all' },
1083
- '.select-auto': { 'user-select': 'auto' },
1084
- })
1085
- },
1086
-
1087
- resize: ({ addUtilities }) => {
1088
- addUtilities({
1089
- '.resize-none': { resize: 'none' },
1090
- '.resize-y': { resize: 'vertical' },
1091
- '.resize-x': { resize: 'horizontal' },
1092
- '.resize': { resize: 'both' },
1093
- })
1094
- },
1095
-
1096
- scrollSnapType: ({ addDefaults, addUtilities }) => {
1097
- addDefaults('scroll-snap-type', {
1098
- '--tw-scroll-snap-strictness': 'proximity',
1099
- })
1100
-
1101
- addUtilities({
1102
- '.snap-none': { 'scroll-snap-type': 'none' },
1103
- '.snap-x': {
1104
- '@defaults scroll-snap-type': {},
1105
- 'scroll-snap-type': 'x var(--tw-scroll-snap-strictness)',
1106
- },
1107
- '.snap-y': {
1108
- '@defaults scroll-snap-type': {},
1109
- 'scroll-snap-type': 'y var(--tw-scroll-snap-strictness)',
1110
- },
1111
- '.snap-both': {
1112
- '@defaults scroll-snap-type': {},
1113
- 'scroll-snap-type': 'both var(--tw-scroll-snap-strictness)',
1114
- },
1115
- '.snap-mandatory': { '--tw-scroll-snap-strictness': 'mandatory' },
1116
- '.snap-proximity': { '--tw-scroll-snap-strictness': 'proximity' },
1117
- })
1118
- },
1119
-
1120
- scrollSnapAlign: ({ addUtilities }) => {
1121
- addUtilities({
1122
- '.snap-start': { 'scroll-snap-align': 'start' },
1123
- '.snap-end': { 'scroll-snap-align': 'end' },
1124
- '.snap-center': { 'scroll-snap-align': 'center' },
1125
- '.snap-align-none': { 'scroll-snap-align': 'none' },
1126
- })
1127
- },
1128
-
1129
- scrollSnapStop: ({ addUtilities }) => {
1130
- addUtilities({
1131
- '.snap-normal': { 'scroll-snap-stop': 'normal' },
1132
- '.snap-always': { 'scroll-snap-stop': 'always' },
1133
- })
1134
- },
1135
-
1136
- scrollMargin: createUtilityPlugin(
1137
- 'scrollMargin',
1138
- [
1139
- ['scroll-m', ['scroll-margin']],
1140
- [
1141
- ['scroll-mx', ['scroll-margin-left', 'scroll-margin-right']],
1142
- ['scroll-my', ['scroll-margin-top', 'scroll-margin-bottom']],
1143
- ],
1144
- [
1145
- ['scroll-ms', ['scroll-margin-inline-start']],
1146
- ['scroll-me', ['scroll-margin-inline-end']],
1147
- ['scroll-mt', ['scroll-margin-top']],
1148
- ['scroll-mr', ['scroll-margin-right']],
1149
- ['scroll-mb', ['scroll-margin-bottom']],
1150
- ['scroll-ml', ['scroll-margin-left']],
1151
- ],
1152
- ],
1153
- { supportsNegativeValues: true }
1154
- ),
1155
-
1156
- scrollPadding: createUtilityPlugin('scrollPadding', [
1157
- ['scroll-p', ['scroll-padding']],
1158
- [
1159
- ['scroll-px', ['scroll-padding-left', 'scroll-padding-right']],
1160
- ['scroll-py', ['scroll-padding-top', 'scroll-padding-bottom']],
1161
- ],
1162
- [
1163
- ['scroll-ps', ['scroll-padding-inline-start']],
1164
- ['scroll-pe', ['scroll-padding-inline-end']],
1165
- ['scroll-pt', ['scroll-padding-top']],
1166
- ['scroll-pr', ['scroll-padding-right']],
1167
- ['scroll-pb', ['scroll-padding-bottom']],
1168
- ['scroll-pl', ['scroll-padding-left']],
1169
- ],
1170
- ]),
1171
-
1172
- listStylePosition: ({ addUtilities }) => {
1173
- addUtilities({
1174
- '.list-inside': { 'list-style-position': 'inside' },
1175
- '.list-outside': { 'list-style-position': 'outside' },
1176
- })
1177
- },
1178
- listStyleType: createUtilityPlugin('listStyleType', [['list', ['listStyleType']]]),
1179
- listStyleImage: createUtilityPlugin('listStyleImage', [['list-image', ['listStyleImage']]]),
1180
-
1181
- appearance: ({ addUtilities }) => {
1182
- addUtilities({
1183
- '.appearance-none': { appearance: 'none' },
1184
- '.appearance-auto': { appearance: 'auto' },
1185
- })
1186
- },
1187
-
1188
- columns: createUtilityPlugin('columns', [['columns', ['columns']]]),
1189
-
1190
- breakBefore: ({ addUtilities }) => {
1191
- addUtilities({
1192
- '.break-before-auto': { 'break-before': 'auto' },
1193
- '.break-before-avoid': { 'break-before': 'avoid' },
1194
- '.break-before-all': { 'break-before': 'all' },
1195
- '.break-before-avoid-page': { 'break-before': 'avoid-page' },
1196
- '.break-before-page': { 'break-before': 'page' },
1197
- '.break-before-left': { 'break-before': 'left' },
1198
- '.break-before-right': { 'break-before': 'right' },
1199
- '.break-before-column': { 'break-before': 'column' },
1200
- })
1201
- },
1202
-
1203
- breakInside: ({ addUtilities }) => {
1204
- addUtilities({
1205
- '.break-inside-auto': { 'break-inside': 'auto' },
1206
- '.break-inside-avoid': { 'break-inside': 'avoid' },
1207
- '.break-inside-avoid-page': { 'break-inside': 'avoid-page' },
1208
- '.break-inside-avoid-column': { 'break-inside': 'avoid-column' },
1209
- })
1210
- },
1211
-
1212
- breakAfter: ({ addUtilities }) => {
1213
- addUtilities({
1214
- '.break-after-auto': { 'break-after': 'auto' },
1215
- '.break-after-avoid': { 'break-after': 'avoid' },
1216
- '.break-after-all': { 'break-after': 'all' },
1217
- '.break-after-avoid-page': { 'break-after': 'avoid-page' },
1218
- '.break-after-page': { 'break-after': 'page' },
1219
- '.break-after-left': { 'break-after': 'left' },
1220
- '.break-after-right': { 'break-after': 'right' },
1221
- '.break-after-column': { 'break-after': 'column' },
1222
- })
1223
- },
1224
-
1225
- gridAutoColumns: createUtilityPlugin('gridAutoColumns', [['auto-cols', ['gridAutoColumns']]]),
1226
-
1227
- gridAutoFlow: ({ addUtilities }) => {
1228
- addUtilities({
1229
- '.grid-flow-row': { gridAutoFlow: 'row' },
1230
- '.grid-flow-col': { gridAutoFlow: 'column' },
1231
- '.grid-flow-dense': { gridAutoFlow: 'dense' },
1232
- '.grid-flow-row-dense': { gridAutoFlow: 'row dense' },
1233
- '.grid-flow-col-dense': { gridAutoFlow: 'column dense' },
1234
- })
1235
- },
1236
-
1237
- gridAutoRows: createUtilityPlugin('gridAutoRows', [['auto-rows', ['gridAutoRows']]]),
1238
- gridTemplateColumns: createUtilityPlugin('gridTemplateColumns', [
1239
- ['grid-cols', ['gridTemplateColumns']],
1240
- ]),
1241
- gridTemplateRows: createUtilityPlugin('gridTemplateRows', [['grid-rows', ['gridTemplateRows']]]),
1242
-
1243
- flexDirection: ({ addUtilities }) => {
1244
- addUtilities({
1245
- '.flex-row': { 'flex-direction': 'row' },
1246
- '.flex-row-reverse': { 'flex-direction': 'row-reverse' },
1247
- '.flex-col': { 'flex-direction': 'column' },
1248
- '.flex-col-reverse': { 'flex-direction': 'column-reverse' },
1249
- })
1250
- },
1251
-
1252
- flexWrap: ({ addUtilities }) => {
1253
- addUtilities({
1254
- '.flex-wrap': { 'flex-wrap': 'wrap' },
1255
- '.flex-wrap-reverse': { 'flex-wrap': 'wrap-reverse' },
1256
- '.flex-nowrap': { 'flex-wrap': 'nowrap' },
1257
- })
1258
- },
1259
-
1260
- placeContent: ({ addUtilities }) => {
1261
- addUtilities({
1262
- '.place-content-center': { 'place-content': 'center' },
1263
- '.place-content-start': { 'place-content': 'start' },
1264
- '.place-content-end': { 'place-content': 'end' },
1265
- '.place-content-between': { 'place-content': 'space-between' },
1266
- '.place-content-around': { 'place-content': 'space-around' },
1267
- '.place-content-evenly': { 'place-content': 'space-evenly' },
1268
- '.place-content-baseline': { 'place-content': 'baseline' },
1269
- '.place-content-stretch': { 'place-content': 'stretch' },
1270
- })
1271
- },
1272
-
1273
- placeItems: ({ addUtilities }) => {
1274
- addUtilities({
1275
- '.place-items-start': { 'place-items': 'start' },
1276
- '.place-items-end': { 'place-items': 'end' },
1277
- '.place-items-center': { 'place-items': 'center' },
1278
- '.place-items-baseline': { 'place-items': 'baseline' },
1279
- '.place-items-stretch': { 'place-items': 'stretch' },
1280
- })
1281
- },
1282
-
1283
- alignContent: ({ addUtilities }) => {
1284
- addUtilities({
1285
- '.content-normal': { 'align-content': 'normal' },
1286
- '.content-center': { 'align-content': 'center' },
1287
- '.content-start': { 'align-content': 'flex-start' },
1288
- '.content-end': { 'align-content': 'flex-end' },
1289
- '.content-between': { 'align-content': 'space-between' },
1290
- '.content-around': { 'align-content': 'space-around' },
1291
- '.content-evenly': { 'align-content': 'space-evenly' },
1292
- '.content-baseline': { 'align-content': 'baseline' },
1293
- '.content-stretch': { 'align-content': 'stretch' },
1294
- })
1295
- },
1296
-
1297
- alignItems: ({ addUtilities }) => {
1298
- addUtilities({
1299
- '.items-start': { 'align-items': 'flex-start' },
1300
- '.items-end': { 'align-items': 'flex-end' },
1301
- '.items-center': { 'align-items': 'center' },
1302
- '.items-baseline': { 'align-items': 'baseline' },
1303
- '.items-stretch': { 'align-items': 'stretch' },
1304
- })
1305
- },
1306
-
1307
- justifyContent: ({ addUtilities }) => {
1308
- addUtilities({
1309
- '.justify-normal': { 'justify-content': 'normal' },
1310
- '.justify-start': { 'justify-content': 'flex-start' },
1311
- '.justify-end': { 'justify-content': 'flex-end' },
1312
- '.justify-center': { 'justify-content': 'center' },
1313
- '.justify-between': { 'justify-content': 'space-between' },
1314
- '.justify-around': { 'justify-content': 'space-around' },
1315
- '.justify-evenly': { 'justify-content': 'space-evenly' },
1316
- '.justify-stretch': { 'justify-content': 'stretch' },
1317
- })
1318
- },
1319
-
1320
- justifyItems: ({ addUtilities }) => {
1321
- addUtilities({
1322
- '.justify-items-start': { 'justify-items': 'start' },
1323
- '.justify-items-end': { 'justify-items': 'end' },
1324
- '.justify-items-center': { 'justify-items': 'center' },
1325
- '.justify-items-stretch': { 'justify-items': 'stretch' },
1326
- })
1327
- },
1328
-
1329
- gap: createUtilityPlugin('gap', [
1330
- ['gap', ['gap']],
1331
- [
1332
- ['gap-x', ['columnGap']],
1333
- ['gap-y', ['rowGap']],
1334
- ],
1335
- ]),
1336
-
1337
- space: ({ matchUtilities, addUtilities, theme }) => {
1338
- matchUtilities(
1339
- {
1340
- 'space-x': (value) => {
1341
- value = value === '0' ? '0px' : value
1342
-
1343
- return {
1344
- '& > :not([hidden]) ~ :not([hidden])': {
1345
- '--tw-space-x-reverse': '0',
1346
- 'margin-right': `calc(${value} * var(--tw-space-x-reverse))`,
1347
- 'margin-left': `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`,
1348
- },
1349
- }
1350
- },
1351
- 'space-y': (value) => {
1352
- value = value === '0' ? '0px' : value
1353
-
1354
- return {
1355
- '& > :not([hidden]) ~ :not([hidden])': {
1356
- '--tw-space-y-reverse': '0',
1357
- 'margin-top': `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`,
1358
- 'margin-bottom': `calc(${value} * var(--tw-space-y-reverse))`,
1359
- },
1360
- }
1361
- },
1362
- },
1363
- { values: theme('space'), supportsNegativeValues: true }
1364
- )
1365
-
1366
- addUtilities({
1367
- '.space-y-reverse > :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '1' },
1368
- '.space-x-reverse > :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '1' },
1369
- })
1370
- },
1371
-
1372
- divideWidth: ({ matchUtilities, addUtilities, theme }) => {
1373
- matchUtilities(
1374
- {
1375
- 'divide-x': (value) => {
1376
- value = value === '0' ? '0px' : value
1377
-
1378
- return {
1379
- '& > :not([hidden]) ~ :not([hidden])': {
1380
- '@defaults border-width': {},
1381
- '--tw-divide-x-reverse': '0',
1382
- 'border-right-width': `calc(${value} * var(--tw-divide-x-reverse))`,
1383
- 'border-left-width': `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`,
1384
- },
1385
- }
1386
- },
1387
- 'divide-y': (value) => {
1388
- value = value === '0' ? '0px' : value
1389
-
1390
- return {
1391
- '& > :not([hidden]) ~ :not([hidden])': {
1392
- '@defaults border-width': {},
1393
- '--tw-divide-y-reverse': '0',
1394
- 'border-top-width': `calc(${value} * calc(1 - var(--tw-divide-y-reverse)))`,
1395
- 'border-bottom-width': `calc(${value} * var(--tw-divide-y-reverse))`,
1396
- },
1397
- }
1398
- },
1399
- },
1400
- { values: theme('divideWidth'), type: ['line-width', 'length', 'any'] }
1401
- )
1402
-
1403
- addUtilities({
1404
- '.divide-y-reverse > :not([hidden]) ~ :not([hidden])': {
1405
- '@defaults border-width': {},
1406
- '--tw-divide-y-reverse': '1',
1407
- },
1408
- '.divide-x-reverse > :not([hidden]) ~ :not([hidden])': {
1409
- '@defaults border-width': {},
1410
- '--tw-divide-x-reverse': '1',
1411
- },
1412
- })
1413
- },
1414
-
1415
- divideStyle: ({ addUtilities }) => {
1416
- addUtilities({
1417
- '.divide-solid > :not([hidden]) ~ :not([hidden])': { 'border-style': 'solid' },
1418
- '.divide-dashed > :not([hidden]) ~ :not([hidden])': { 'border-style': 'dashed' },
1419
- '.divide-dotted > :not([hidden]) ~ :not([hidden])': { 'border-style': 'dotted' },
1420
- '.divide-double > :not([hidden]) ~ :not([hidden])': { 'border-style': 'double' },
1421
- '.divide-none > :not([hidden]) ~ :not([hidden])': { 'border-style': 'none' },
1422
- })
1423
- },
1424
-
1425
- divideColor: ({ matchUtilities, theme, corePlugins }) => {
1426
- matchUtilities(
1427
- {
1428
- divide: (value) => {
1429
- if (!corePlugins('divideOpacity')) {
1430
- return {
1431
- ['& > :not([hidden]) ~ :not([hidden])']: {
1432
- 'border-color': toColorValue(value),
1433
- },
1434
- }
1435
- }
1436
-
1437
- return {
1438
- ['& > :not([hidden]) ~ :not([hidden])']: withAlphaVariable({
1439
- color: value,
1440
- property: 'border-color',
1441
- variable: '--tw-divide-opacity',
1442
- }),
1443
- }
1444
- },
1445
- },
1446
- {
1447
- values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('divideColor'))),
1448
- type: ['color', 'any'],
1449
- }
1450
- )
1451
- },
1452
-
1453
- divideOpacity: ({ matchUtilities, theme }) => {
1454
- matchUtilities(
1455
- {
1456
- 'divide-opacity': (value) => {
1457
- return { [`& > :not([hidden]) ~ :not([hidden])`]: { '--tw-divide-opacity': value } }
1458
- },
1459
- },
1460
- { values: theme('divideOpacity') }
1461
- )
1462
- },
1463
-
1464
- placeSelf: ({ addUtilities }) => {
1465
- addUtilities({
1466
- '.place-self-auto': { 'place-self': 'auto' },
1467
- '.place-self-start': { 'place-self': 'start' },
1468
- '.place-self-end': { 'place-self': 'end' },
1469
- '.place-self-center': { 'place-self': 'center' },
1470
- '.place-self-stretch': { 'place-self': 'stretch' },
1471
- })
1472
- },
1473
-
1474
- alignSelf: ({ addUtilities }) => {
1475
- addUtilities({
1476
- '.self-auto': { 'align-self': 'auto' },
1477
- '.self-start': { 'align-self': 'flex-start' },
1478
- '.self-end': { 'align-self': 'flex-end' },
1479
- '.self-center': { 'align-self': 'center' },
1480
- '.self-stretch': { 'align-self': 'stretch' },
1481
- '.self-baseline': { 'align-self': 'baseline' },
1482
- })
1483
- },
1484
-
1485
- justifySelf: ({ addUtilities }) => {
1486
- addUtilities({
1487
- '.justify-self-auto': { 'justify-self': 'auto' },
1488
- '.justify-self-start': { 'justify-self': 'start' },
1489
- '.justify-self-end': { 'justify-self': 'end' },
1490
- '.justify-self-center': { 'justify-self': 'center' },
1491
- '.justify-self-stretch': { 'justify-self': 'stretch' },
1492
- })
1493
- },
1494
-
1495
- overflow: ({ addUtilities }) => {
1496
- addUtilities({
1497
- '.overflow-auto': { overflow: 'auto' },
1498
- '.overflow-hidden': { overflow: 'hidden' },
1499
- '.overflow-clip': { overflow: 'clip' },
1500
- '.overflow-visible': { overflow: 'visible' },
1501
- '.overflow-scroll': { overflow: 'scroll' },
1502
- '.overflow-x-auto': { 'overflow-x': 'auto' },
1503
- '.overflow-y-auto': { 'overflow-y': 'auto' },
1504
- '.overflow-x-hidden': { 'overflow-x': 'hidden' },
1505
- '.overflow-y-hidden': { 'overflow-y': 'hidden' },
1506
- '.overflow-x-clip': { 'overflow-x': 'clip' },
1507
- '.overflow-y-clip': { 'overflow-y': 'clip' },
1508
- '.overflow-x-visible': { 'overflow-x': 'visible' },
1509
- '.overflow-y-visible': { 'overflow-y': 'visible' },
1510
- '.overflow-x-scroll': { 'overflow-x': 'scroll' },
1511
- '.overflow-y-scroll': { 'overflow-y': 'scroll' },
1512
- })
1513
- },
1514
-
1515
- overscrollBehavior: ({ addUtilities }) => {
1516
- addUtilities({
1517
- '.overscroll-auto': { 'overscroll-behavior': 'auto' },
1518
- '.overscroll-contain': { 'overscroll-behavior': 'contain' },
1519
- '.overscroll-none': { 'overscroll-behavior': 'none' },
1520
- '.overscroll-y-auto': { 'overscroll-behavior-y': 'auto' },
1521
- '.overscroll-y-contain': { 'overscroll-behavior-y': 'contain' },
1522
- '.overscroll-y-none': { 'overscroll-behavior-y': 'none' },
1523
- '.overscroll-x-auto': { 'overscroll-behavior-x': 'auto' },
1524
- '.overscroll-x-contain': { 'overscroll-behavior-x': 'contain' },
1525
- '.overscroll-x-none': { 'overscroll-behavior-x': 'none' },
1526
- })
1527
- },
1528
-
1529
- scrollBehavior: ({ addUtilities }) => {
1530
- addUtilities({
1531
- '.scroll-auto': { 'scroll-behavior': 'auto' },
1532
- '.scroll-smooth': { 'scroll-behavior': 'smooth' },
1533
- })
1534
- },
1535
-
1536
- textOverflow: ({ addUtilities }) => {
1537
- addUtilities({
1538
- '.truncate': { overflow: 'hidden', 'text-overflow': 'ellipsis', 'white-space': 'nowrap' },
1539
- '.overflow-ellipsis': { 'text-overflow': 'ellipsis' }, // Deprecated
1540
- '.text-ellipsis': { 'text-overflow': 'ellipsis' },
1541
- '.text-clip': { 'text-overflow': 'clip' },
1542
- })
1543
- },
1544
-
1545
- hyphens: ({ addUtilities }) => {
1546
- addUtilities({
1547
- '.hyphens-none': { hyphens: 'none' },
1548
- '.hyphens-manual': { hyphens: 'manual' },
1549
- '.hyphens-auto': { hyphens: 'auto' },
1550
- })
1551
- },
1552
-
1553
- whitespace: ({ addUtilities }) => {
1554
- addUtilities({
1555
- '.whitespace-normal': { 'white-space': 'normal' },
1556
- '.whitespace-nowrap': { 'white-space': 'nowrap' },
1557
- '.whitespace-pre': { 'white-space': 'pre' },
1558
- '.whitespace-pre-line': { 'white-space': 'pre-line' },
1559
- '.whitespace-pre-wrap': { 'white-space': 'pre-wrap' },
1560
- '.whitespace-break-spaces': { 'white-space': 'break-spaces' },
1561
- })
1562
- },
1563
-
1564
- textWrap: ({ addUtilities }) => {
1565
- addUtilities({
1566
- '.text-wrap': { 'text-wrap': 'wrap' },
1567
- '.text-nowrap': { 'text-wrap': 'nowrap' },
1568
- '.text-balance': { 'text-wrap': 'balance' },
1569
- '.text-pretty': { 'text-wrap': 'pretty' },
1570
- })
1571
- },
1572
-
1573
- wordBreak: ({ addUtilities }) => {
1574
- addUtilities({
1575
- '.break-normal': { 'overflow-wrap': 'normal', 'word-break': 'normal' },
1576
- '.break-words': { 'overflow-wrap': 'break-word' },
1577
- '.break-all': { 'word-break': 'break-all' },
1578
- '.break-keep': { 'word-break': 'keep-all' },
1579
- })
1580
- },
1581
-
1582
- borderRadius: createUtilityPlugin('borderRadius', [
1583
- ['rounded', ['border-radius']],
1584
- [
1585
- ['rounded-s', ['border-start-start-radius', 'border-end-start-radius']],
1586
- ['rounded-e', ['border-start-end-radius', 'border-end-end-radius']],
1587
- ['rounded-t', ['border-top-left-radius', 'border-top-right-radius']],
1588
- ['rounded-r', ['border-top-right-radius', 'border-bottom-right-radius']],
1589
- ['rounded-b', ['border-bottom-right-radius', 'border-bottom-left-radius']],
1590
- ['rounded-l', ['border-top-left-radius', 'border-bottom-left-radius']],
1591
- ],
1592
- [
1593
- ['rounded-ss', ['border-start-start-radius']],
1594
- ['rounded-se', ['border-start-end-radius']],
1595
- ['rounded-ee', ['border-end-end-radius']],
1596
- ['rounded-es', ['border-end-start-radius']],
1597
- ['rounded-tl', ['border-top-left-radius']],
1598
- ['rounded-tr', ['border-top-right-radius']],
1599
- ['rounded-br', ['border-bottom-right-radius']],
1600
- ['rounded-bl', ['border-bottom-left-radius']],
1601
- ],
1602
- ]),
1603
-
1604
- borderWidth: createUtilityPlugin(
1605
- 'borderWidth',
1606
- [
1607
- ['border', [['@defaults border-width', {}], 'border-width']],
1608
- [
1609
- ['border-x', [['@defaults border-width', {}], 'border-left-width', 'border-right-width']],
1610
- ['border-y', [['@defaults border-width', {}], 'border-top-width', 'border-bottom-width']],
1611
- ],
1612
- [
1613
- ['border-s', [['@defaults border-width', {}], 'border-inline-start-width']],
1614
- ['border-e', [['@defaults border-width', {}], 'border-inline-end-width']],
1615
- ['border-t', [['@defaults border-width', {}], 'border-top-width']],
1616
- ['border-r', [['@defaults border-width', {}], 'border-right-width']],
1617
- ['border-b', [['@defaults border-width', {}], 'border-bottom-width']],
1618
- ['border-l', [['@defaults border-width', {}], 'border-left-width']],
1619
- ],
1620
- ],
1621
- { type: ['line-width', 'length'] }
1622
- ),
1623
-
1624
- borderStyle: ({ addUtilities }) => {
1625
- addUtilities({
1626
- '.border-solid': { 'border-style': 'solid' },
1627
- '.border-dashed': { 'border-style': 'dashed' },
1628
- '.border-dotted': { 'border-style': 'dotted' },
1629
- '.border-double': { 'border-style': 'double' },
1630
- '.border-hidden': { 'border-style': 'hidden' },
1631
- '.border-none': { 'border-style': 'none' },
1632
- })
1633
- },
1634
-
1635
- borderColor: ({ matchUtilities, theme, corePlugins }) => {
1636
- matchUtilities(
1637
- {
1638
- border: (value) => {
1639
- if (!corePlugins('borderOpacity')) {
1640
- return {
1641
- 'border-color': toColorValue(value),
1642
- }
1643
- }
1644
-
1645
- return withAlphaVariable({
1646
- color: value,
1647
- property: 'border-color',
1648
- variable: '--tw-border-opacity',
1649
- })
1650
- },
1651
- },
1652
- {
1653
- values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('borderColor'))),
1654
- type: ['color', 'any'],
1655
- }
1656
- )
1657
-
1658
- matchUtilities(
1659
- {
1660
- 'border-x': (value) => {
1661
- if (!corePlugins('borderOpacity')) {
1662
- return {
1663
- 'border-left-color': toColorValue(value),
1664
- 'border-right-color': toColorValue(value),
1665
- }
1666
- }
1667
-
1668
- return withAlphaVariable({
1669
- color: value,
1670
- property: ['border-left-color', 'border-right-color'],
1671
- variable: '--tw-border-opacity',
1672
- })
1673
- },
1674
- 'border-y': (value) => {
1675
- if (!corePlugins('borderOpacity')) {
1676
- return {
1677
- 'border-top-color': toColorValue(value),
1678
- 'border-bottom-color': toColorValue(value),
1679
- }
1680
- }
1681
-
1682
- return withAlphaVariable({
1683
- color: value,
1684
- property: ['border-top-color', 'border-bottom-color'],
1685
- variable: '--tw-border-opacity',
1686
- })
1687
- },
1688
- },
1689
- {
1690
- values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('borderColor'))),
1691
- type: ['color', 'any'],
1692
- }
1693
- )
1694
-
1695
- matchUtilities(
1696
- {
1697
- 'border-s': (value) => {
1698
- if (!corePlugins('borderOpacity')) {
1699
- return {
1700
- 'border-inline-start-color': toColorValue(value),
1701
- }
1702
- }
1703
-
1704
- return withAlphaVariable({
1705
- color: value,
1706
- property: 'border-inline-start-color',
1707
- variable: '--tw-border-opacity',
1708
- })
1709
- },
1710
- 'border-e': (value) => {
1711
- if (!corePlugins('borderOpacity')) {
1712
- return {
1713
- 'border-inline-end-color': toColorValue(value),
1714
- }
1715
- }
1716
-
1717
- return withAlphaVariable({
1718
- color: value,
1719
- property: 'border-inline-end-color',
1720
- variable: '--tw-border-opacity',
1721
- })
1722
- },
1723
- 'border-t': (value) => {
1724
- if (!corePlugins('borderOpacity')) {
1725
- return {
1726
- 'border-top-color': toColorValue(value),
1727
- }
1728
- }
1729
-
1730
- return withAlphaVariable({
1731
- color: value,
1732
- property: 'border-top-color',
1733
- variable: '--tw-border-opacity',
1734
- })
1735
- },
1736
- 'border-r': (value) => {
1737
- if (!corePlugins('borderOpacity')) {
1738
- return {
1739
- 'border-right-color': toColorValue(value),
1740
- }
1741
- }
1742
-
1743
- return withAlphaVariable({
1744
- color: value,
1745
- property: 'border-right-color',
1746
- variable: '--tw-border-opacity',
1747
- })
1748
- },
1749
- 'border-b': (value) => {
1750
- if (!corePlugins('borderOpacity')) {
1751
- return {
1752
- 'border-bottom-color': toColorValue(value),
1753
- }
1754
- }
1755
-
1756
- return withAlphaVariable({
1757
- color: value,
1758
- property: 'border-bottom-color',
1759
- variable: '--tw-border-opacity',
1760
- })
1761
- },
1762
- 'border-l': (value) => {
1763
- if (!corePlugins('borderOpacity')) {
1764
- return {
1765
- 'border-left-color': toColorValue(value),
1766
- }
1767
- }
1768
-
1769
- return withAlphaVariable({
1770
- color: value,
1771
- property: 'border-left-color',
1772
- variable: '--tw-border-opacity',
1773
- })
1774
- },
1775
- },
1776
- {
1777
- values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('borderColor'))),
1778
- type: ['color', 'any'],
1779
- }
1780
- )
1781
- },
1782
-
1783
- borderOpacity: createUtilityPlugin('borderOpacity', [
1784
- ['border-opacity', ['--tw-border-opacity']],
1785
- ]),
1786
-
1787
- backgroundColor: ({ matchUtilities, theme, corePlugins }) => {
1788
- matchUtilities(
1789
- {
1790
- bg: (value) => {
1791
- if (!corePlugins('backgroundOpacity')) {
1792
- return {
1793
- 'background-color': toColorValue(value),
1794
- }
1795
- }
1796
-
1797
- return withAlphaVariable({
1798
- color: value,
1799
- property: 'background-color',
1800
- variable: '--tw-bg-opacity',
1801
- })
1802
- },
1803
- },
1804
- { values: flattenColorPalette(theme('backgroundColor')), type: ['color', 'any'] }
1805
- )
1806
- },
1807
-
1808
- backgroundOpacity: createUtilityPlugin('backgroundOpacity', [
1809
- ['bg-opacity', ['--tw-bg-opacity']],
1810
- ]),
1811
- backgroundImage: createUtilityPlugin('backgroundImage', [['bg', ['background-image']]], {
1812
- type: ['lookup', 'image', 'url'],
1813
- }),
1814
- gradientColorStops: (() => {
1815
- function transparentTo(value) {
1816
- return withAlphaValue(value, 0, 'rgb(255 255 255 / 0)')
1817
- }
1818
-
1819
- return function ({ matchUtilities, theme, addDefaults }) {
1820
- addDefaults('gradient-color-stops', {
1821
- '--tw-gradient-from-position': ' ',
1822
- '--tw-gradient-via-position': ' ',
1823
- '--tw-gradient-to-position': ' ',
1824
- })
1825
-
1826
- let options = {
1827
- values: flattenColorPalette(theme('gradientColorStops')),
1828
- type: ['color', 'any'],
1829
- }
1830
-
1831
- let positionOptions = {
1832
- values: theme('gradientColorStopPositions'),
1833
- type: ['length', 'percentage'],
1834
- }
1835
-
1836
- matchUtilities(
1837
- {
1838
- from: (value) => {
1839
- let transparentToValue = transparentTo(value)
1840
-
1841
- return {
1842
- '@defaults gradient-color-stops': {},
1843
- '--tw-gradient-from': `${toColorValue(value)} var(--tw-gradient-from-position)`,
1844
- '--tw-gradient-to': `${transparentToValue} var(--tw-gradient-to-position)`,
1845
- '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to)`,
1846
- }
1847
- },
1848
- },
1849
- options
1850
- )
1851
-
1852
- matchUtilities(
1853
- {
1854
- from: (value) => {
1855
- return {
1856
- '--tw-gradient-from-position': value,
1857
- }
1858
- },
1859
- },
1860
- positionOptions
1861
- )
1862
-
1863
- matchUtilities(
1864
- {
1865
- via: (value) => {
1866
- let transparentToValue = transparentTo(value)
1867
-
1868
- return {
1869
- '@defaults gradient-color-stops': {},
1870
- '--tw-gradient-to': `${transparentToValue} var(--tw-gradient-to-position)`,
1871
- '--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
1872
- value
1873
- )} var(--tw-gradient-via-position), var(--tw-gradient-to)`,
1874
- }
1875
- },
1876
- },
1877
- options
1878
- )
1879
-
1880
- matchUtilities(
1881
- {
1882
- via: (value) => {
1883
- return {
1884
- '--tw-gradient-via-position': value,
1885
- }
1886
- },
1887
- },
1888
- positionOptions
1889
- )
1890
-
1891
- matchUtilities(
1892
- {
1893
- to: (value) => ({
1894
- '@defaults gradient-color-stops': {},
1895
- '--tw-gradient-to': `${toColorValue(value)} var(--tw-gradient-to-position)`,
1896
- }),
1897
- },
1898
- options
1899
- )
1900
-
1901
- matchUtilities(
1902
- {
1903
- to: (value) => {
1904
- return {
1905
- '--tw-gradient-to-position': value,
1906
- }
1907
- },
1908
- },
1909
- positionOptions
1910
- )
1911
- }
1912
- })(),
1913
-
1914
- boxDecorationBreak: ({ addUtilities }) => {
1915
- addUtilities({
1916
- '.decoration-slice': { 'box-decoration-break': 'slice' }, // Deprecated
1917
- '.decoration-clone': { 'box-decoration-break': 'clone' }, // Deprecated
1918
- '.box-decoration-slice': { 'box-decoration-break': 'slice' },
1919
- '.box-decoration-clone': { 'box-decoration-break': 'clone' },
1920
- })
1921
- },
1922
-
1923
- backgroundSize: createUtilityPlugin('backgroundSize', [['bg', ['background-size']]], {
1924
- type: ['lookup', 'length', 'percentage', 'size'],
1925
- }),
1926
-
1927
- backgroundAttachment: ({ addUtilities }) => {
1928
- addUtilities({
1929
- '.bg-fixed': { 'background-attachment': 'fixed' },
1930
- '.bg-local': { 'background-attachment': 'local' },
1931
- '.bg-scroll': { 'background-attachment': 'scroll' },
1932
- })
1933
- },
1934
-
1935
- backgroundClip: ({ addUtilities }) => {
1936
- addUtilities({
1937
- '.bg-clip-border': { 'background-clip': 'border-box' },
1938
- '.bg-clip-padding': { 'background-clip': 'padding-box' },
1939
- '.bg-clip-content': { 'background-clip': 'content-box' },
1940
- '.bg-clip-text': { 'background-clip': 'text' },
1941
- })
1942
- },
1943
-
1944
- backgroundPosition: createUtilityPlugin('backgroundPosition', [['bg', ['background-position']]], {
1945
- type: ['lookup', ['position', { preferOnConflict: true }]],
1946
- }),
1947
-
1948
- backgroundRepeat: ({ addUtilities }) => {
1949
- addUtilities({
1950
- '.bg-repeat': { 'background-repeat': 'repeat' },
1951
- '.bg-no-repeat': { 'background-repeat': 'no-repeat' },
1952
- '.bg-repeat-x': { 'background-repeat': 'repeat-x' },
1953
- '.bg-repeat-y': { 'background-repeat': 'repeat-y' },
1954
- '.bg-repeat-round': { 'background-repeat': 'round' },
1955
- '.bg-repeat-space': { 'background-repeat': 'space' },
1956
- })
1957
- },
1958
-
1959
- backgroundOrigin: ({ addUtilities }) => {
1960
- addUtilities({
1961
- '.bg-origin-border': { 'background-origin': 'border-box' },
1962
- '.bg-origin-padding': { 'background-origin': 'padding-box' },
1963
- '.bg-origin-content': { 'background-origin': 'content-box' },
1964
- })
1965
- },
1966
-
1967
- fill: ({ matchUtilities, theme }) => {
1968
- matchUtilities(
1969
- {
1970
- fill: (value) => {
1971
- return { fill: toColorValue(value) }
1972
- },
1973
- },
1974
- { values: flattenColorPalette(theme('fill')), type: ['color', 'any'] }
1975
- )
1976
- },
1977
-
1978
- stroke: ({ matchUtilities, theme }) => {
1979
- matchUtilities(
1980
- {
1981
- stroke: (value) => {
1982
- return { stroke: toColorValue(value) }
1983
- },
1984
- },
1985
- { values: flattenColorPalette(theme('stroke')), type: ['color', 'url', 'any'] }
1986
- )
1987
- },
1988
-
1989
- strokeWidth: createUtilityPlugin('strokeWidth', [['stroke', ['stroke-width']]], {
1990
- type: ['length', 'number', 'percentage'],
1991
- }),
1992
-
1993
- objectFit: ({ addUtilities }) => {
1994
- addUtilities({
1995
- '.object-contain': { 'object-fit': 'contain' },
1996
- '.object-cover': { 'object-fit': 'cover' },
1997
- '.object-fill': { 'object-fit': 'fill' },
1998
- '.object-none': { 'object-fit': 'none' },
1999
- '.object-scale-down': { 'object-fit': 'scale-down' },
2000
- })
2001
- },
2002
- objectPosition: createUtilityPlugin('objectPosition', [['object', ['object-position']]]),
2003
-
2004
- padding: createUtilityPlugin('padding', [
2005
- ['p', ['padding']],
2006
- [
2007
- ['px', ['padding-left', 'padding-right']],
2008
- ['py', ['padding-top', 'padding-bottom']],
2009
- ],
2010
- [
2011
- ['ps', ['padding-inline-start']],
2012
- ['pe', ['padding-inline-end']],
2013
- ['pt', ['padding-top']],
2014
- ['pr', ['padding-right']],
2015
- ['pb', ['padding-bottom']],
2016
- ['pl', ['padding-left']],
2017
- ],
2018
- ]),
2019
-
2020
- textAlign: ({ addUtilities }) => {
2021
- addUtilities({
2022
- '.text-left': { 'text-align': 'left' },
2023
- '.text-center': { 'text-align': 'center' },
2024
- '.text-right': { 'text-align': 'right' },
2025
- '.text-justify': { 'text-align': 'justify' },
2026
- '.text-start': { 'text-align': 'start' },
2027
- '.text-end': { 'text-align': 'end' },
2028
- })
2029
- },
2030
-
2031
- textIndent: createUtilityPlugin('textIndent', [['indent', ['text-indent']]], {
2032
- supportsNegativeValues: true,
2033
- }),
2034
-
2035
- verticalAlign: ({ addUtilities, matchUtilities }) => {
2036
- addUtilities({
2037
- '.align-baseline': { 'vertical-align': 'baseline' },
2038
- '.align-top': { 'vertical-align': 'top' },
2039
- '.align-middle': { 'vertical-align': 'middle' },
2040
- '.align-bottom': { 'vertical-align': 'bottom' },
2041
- '.align-text-top': { 'vertical-align': 'text-top' },
2042
- '.align-text-bottom': { 'vertical-align': 'text-bottom' },
2043
- '.align-sub': { 'vertical-align': 'sub' },
2044
- '.align-super': { 'vertical-align': 'super' },
2045
- })
2046
-
2047
- matchUtilities({ align: (value) => ({ 'vertical-align': value }) })
2048
- },
2049
-
2050
- fontFamily: ({ matchUtilities, theme }) => {
2051
- matchUtilities(
2052
- {
2053
- font: (value) => {
2054
- let [families, options = {}] =
2055
- Array.isArray(value) && isPlainObject(value[1]) ? value : [value]
2056
- let { fontFeatureSettings, fontVariationSettings } = options
2057
-
2058
- return {
2059
- 'font-family': Array.isArray(families) ? families.join(', ') : families,
2060
- ...(fontFeatureSettings === undefined
2061
- ? {}
2062
- : { 'font-feature-settings': fontFeatureSettings }),
2063
- ...(fontVariationSettings === undefined
2064
- ? {}
2065
- : { 'font-variation-settings': fontVariationSettings }),
2066
- }
2067
- },
2068
- },
2069
- {
2070
- values: theme('fontFamily'),
2071
- type: ['lookup', 'generic-name', 'family-name'],
2072
- }
2073
- )
2074
- },
2075
-
2076
- fontSize: ({ matchUtilities, theme }) => {
2077
- matchUtilities(
2078
- {
2079
- text: (value, { modifier }) => {
2080
- let [fontSize, options] = Array.isArray(value) ? value : [value]
2081
-
2082
- if (modifier) {
2083
- return {
2084
- 'font-size': fontSize,
2085
- 'line-height': modifier,
2086
- }
2087
- }
2088
-
2089
- let { lineHeight, letterSpacing, fontWeight } = isPlainObject(options)
2090
- ? options
2091
- : { lineHeight: options }
2092
-
2093
- return {
2094
- 'font-size': fontSize,
2095
- ...(lineHeight === undefined ? {} : { 'line-height': lineHeight }),
2096
- ...(letterSpacing === undefined ? {} : { 'letter-spacing': letterSpacing }),
2097
- ...(fontWeight === undefined ? {} : { 'font-weight': fontWeight }),
2098
- }
2099
- },
2100
- },
2101
- {
2102
- values: theme('fontSize'),
2103
- modifiers: theme('lineHeight'),
2104
- type: ['absolute-size', 'relative-size', 'length', 'percentage'],
2105
- }
2106
- )
2107
- },
2108
-
2109
- fontWeight: createUtilityPlugin('fontWeight', [['font', ['fontWeight']]], {
2110
- type: ['lookup', 'number', 'any'],
2111
- }),
2112
-
2113
- textTransform: ({ addUtilities }) => {
2114
- addUtilities({
2115
- '.uppercase': { 'text-transform': 'uppercase' },
2116
- '.lowercase': { 'text-transform': 'lowercase' },
2117
- '.capitalize': { 'text-transform': 'capitalize' },
2118
- '.normal-case': { 'text-transform': 'none' },
2119
- })
2120
- },
2121
-
2122
- fontStyle: ({ addUtilities }) => {
2123
- addUtilities({
2124
- '.italic': { 'font-style': 'italic' },
2125
- '.not-italic': { 'font-style': 'normal' },
2126
- })
2127
- },
2128
-
2129
- fontVariantNumeric: ({ addDefaults, addUtilities }) => {
2130
- let cssFontVariantNumericValue =
2131
- 'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)'
2132
-
2133
- addDefaults('font-variant-numeric', {
2134
- '--tw-ordinal': ' ',
2135
- '--tw-slashed-zero': ' ',
2136
- '--tw-numeric-figure': ' ',
2137
- '--tw-numeric-spacing': ' ',
2138
- '--tw-numeric-fraction': ' ',
2139
- })
2140
-
2141
- addUtilities({
2142
- '.normal-nums': { 'font-variant-numeric': 'normal' },
2143
- '.ordinal': {
2144
- '@defaults font-variant-numeric': {},
2145
- '--tw-ordinal': 'ordinal',
2146
- 'font-variant-numeric': cssFontVariantNumericValue,
2147
- },
2148
- '.slashed-zero': {
2149
- '@defaults font-variant-numeric': {},
2150
- '--tw-slashed-zero': 'slashed-zero',
2151
- 'font-variant-numeric': cssFontVariantNumericValue,
2152
- },
2153
- '.lining-nums': {
2154
- '@defaults font-variant-numeric': {},
2155
- '--tw-numeric-figure': 'lining-nums',
2156
- 'font-variant-numeric': cssFontVariantNumericValue,
2157
- },
2158
- '.oldstyle-nums': {
2159
- '@defaults font-variant-numeric': {},
2160
- '--tw-numeric-figure': 'oldstyle-nums',
2161
- 'font-variant-numeric': cssFontVariantNumericValue,
2162
- },
2163
- '.proportional-nums': {
2164
- '@defaults font-variant-numeric': {},
2165
- '--tw-numeric-spacing': 'proportional-nums',
2166
- 'font-variant-numeric': cssFontVariantNumericValue,
2167
- },
2168
- '.tabular-nums': {
2169
- '@defaults font-variant-numeric': {},
2170
- '--tw-numeric-spacing': 'tabular-nums',
2171
- 'font-variant-numeric': cssFontVariantNumericValue,
2172
- },
2173
- '.diagonal-fractions': {
2174
- '@defaults font-variant-numeric': {},
2175
- '--tw-numeric-fraction': 'diagonal-fractions',
2176
- 'font-variant-numeric': cssFontVariantNumericValue,
2177
- },
2178
- '.stacked-fractions': {
2179
- '@defaults font-variant-numeric': {},
2180
- '--tw-numeric-fraction': 'stacked-fractions',
2181
- 'font-variant-numeric': cssFontVariantNumericValue,
2182
- },
2183
- })
2184
- },
2185
-
2186
- lineHeight: createUtilityPlugin('lineHeight', [['leading', ['lineHeight']]]),
2187
- letterSpacing: createUtilityPlugin('letterSpacing', [['tracking', ['letterSpacing']]], {
2188
- supportsNegativeValues: true,
2189
- }),
2190
-
2191
- textColor: ({ matchUtilities, theme, corePlugins }) => {
2192
- matchUtilities(
2193
- {
2194
- text: (value) => {
2195
- if (!corePlugins('textOpacity')) {
2196
- return { color: toColorValue(value) }
2197
- }
2198
-
2199
- return withAlphaVariable({
2200
- color: value,
2201
- property: 'color',
2202
- variable: '--tw-text-opacity',
2203
- })
2204
- },
2205
- },
2206
- { values: flattenColorPalette(theme('textColor')), type: ['color', 'any'] }
2207
- )
2208
- },
2209
-
2210
- textOpacity: createUtilityPlugin('textOpacity', [['text-opacity', ['--tw-text-opacity']]]),
2211
-
2212
- textDecoration: ({ addUtilities }) => {
2213
- addUtilities({
2214
- '.underline': { 'text-decoration-line': 'underline' },
2215
- '.overline': { 'text-decoration-line': 'overline' },
2216
- '.line-through': { 'text-decoration-line': 'line-through' },
2217
- '.no-underline': { 'text-decoration-line': 'none' },
2218
- })
2219
- },
2220
-
2221
- textDecorationColor: ({ matchUtilities, theme }) => {
2222
- matchUtilities(
2223
- {
2224
- decoration: (value) => {
2225
- return { 'text-decoration-color': toColorValue(value) }
2226
- },
2227
- },
2228
- { values: flattenColorPalette(theme('textDecorationColor')), type: ['color', 'any'] }
2229
- )
2230
- },
2231
-
2232
- textDecorationStyle: ({ addUtilities }) => {
2233
- addUtilities({
2234
- '.decoration-solid': { 'text-decoration-style': 'solid' },
2235
- '.decoration-double': { 'text-decoration-style': 'double' },
2236
- '.decoration-dotted': { 'text-decoration-style': 'dotted' },
2237
- '.decoration-dashed': { 'text-decoration-style': 'dashed' },
2238
- '.decoration-wavy': { 'text-decoration-style': 'wavy' },
2239
- })
2240
- },
2241
-
2242
- textDecorationThickness: createUtilityPlugin(
2243
- 'textDecorationThickness',
2244
- [['decoration', ['text-decoration-thickness']]],
2245
- { type: ['length', 'percentage'] }
2246
- ),
2247
-
2248
- textUnderlineOffset: createUtilityPlugin(
2249
- 'textUnderlineOffset',
2250
- [['underline-offset', ['text-underline-offset']]],
2251
- { type: ['length', 'percentage', 'any'] }
2252
- ),
2253
-
2254
- fontSmoothing: ({ addUtilities }) => {
2255
- addUtilities({
2256
- '.antialiased': {
2257
- '-webkit-font-smoothing': 'antialiased',
2258
- '-moz-osx-font-smoothing': 'grayscale',
2259
- },
2260
- '.subpixel-antialiased': {
2261
- '-webkit-font-smoothing': 'auto',
2262
- '-moz-osx-font-smoothing': 'auto',
2263
- },
2264
- })
2265
- },
2266
-
2267
- placeholderColor: ({ matchUtilities, theme, corePlugins }) => {
2268
- matchUtilities(
2269
- {
2270
- placeholder: (value) => {
2271
- if (!corePlugins('placeholderOpacity')) {
2272
- return {
2273
- '&::placeholder': {
2274
- color: toColorValue(value),
2275
- },
2276
- }
2277
- }
2278
-
2279
- return {
2280
- '&::placeholder': withAlphaVariable({
2281
- color: value,
2282
- property: 'color',
2283
- variable: '--tw-placeholder-opacity',
2284
- }),
2285
- }
2286
- },
2287
- },
2288
- { values: flattenColorPalette(theme('placeholderColor')), type: ['color', 'any'] }
2289
- )
2290
- },
2291
-
2292
- placeholderOpacity: ({ matchUtilities, theme }) => {
2293
- matchUtilities(
2294
- {
2295
- 'placeholder-opacity': (value) => {
2296
- return { ['&::placeholder']: { '--tw-placeholder-opacity': value } }
2297
- },
2298
- },
2299
- { values: theme('placeholderOpacity') }
2300
- )
2301
- },
2302
-
2303
- caretColor: ({ matchUtilities, theme }) => {
2304
- matchUtilities(
2305
- {
2306
- caret: (value) => {
2307
- return { 'caret-color': toColorValue(value) }
2308
- },
2309
- },
2310
- { values: flattenColorPalette(theme('caretColor')), type: ['color', 'any'] }
2311
- )
2312
- },
2313
-
2314
- accentColor: ({ matchUtilities, theme }) => {
2315
- matchUtilities(
2316
- {
2317
- accent: (value) => {
2318
- return { 'accent-color': toColorValue(value) }
2319
- },
2320
- },
2321
- { values: flattenColorPalette(theme('accentColor')), type: ['color', 'any'] }
2322
- )
2323
- },
2324
-
2325
- opacity: createUtilityPlugin('opacity', [['opacity', ['opacity']]]),
2326
-
2327
- backgroundBlendMode: ({ addUtilities }) => {
2328
- addUtilities({
2329
- '.bg-blend-normal': { 'background-blend-mode': 'normal' },
2330
- '.bg-blend-multiply': { 'background-blend-mode': 'multiply' },
2331
- '.bg-blend-screen': { 'background-blend-mode': 'screen' },
2332
- '.bg-blend-overlay': { 'background-blend-mode': 'overlay' },
2333
- '.bg-blend-darken': { 'background-blend-mode': 'darken' },
2334
- '.bg-blend-lighten': { 'background-blend-mode': 'lighten' },
2335
- '.bg-blend-color-dodge': { 'background-blend-mode': 'color-dodge' },
2336
- '.bg-blend-color-burn': { 'background-blend-mode': 'color-burn' },
2337
- '.bg-blend-hard-light': { 'background-blend-mode': 'hard-light' },
2338
- '.bg-blend-soft-light': { 'background-blend-mode': 'soft-light' },
2339
- '.bg-blend-difference': { 'background-blend-mode': 'difference' },
2340
- '.bg-blend-exclusion': { 'background-blend-mode': 'exclusion' },
2341
- '.bg-blend-hue': { 'background-blend-mode': 'hue' },
2342
- '.bg-blend-saturation': { 'background-blend-mode': 'saturation' },
2343
- '.bg-blend-color': { 'background-blend-mode': 'color' },
2344
- '.bg-blend-luminosity': { 'background-blend-mode': 'luminosity' },
2345
- })
2346
- },
2347
-
2348
- mixBlendMode: ({ addUtilities }) => {
2349
- addUtilities({
2350
- '.mix-blend-normal': { 'mix-blend-mode': 'normal' },
2351
- '.mix-blend-multiply': { 'mix-blend-mode': 'multiply' },
2352
- '.mix-blend-screen': { 'mix-blend-mode': 'screen' },
2353
- '.mix-blend-overlay': { 'mix-blend-mode': 'overlay' },
2354
- '.mix-blend-darken': { 'mix-blend-mode': 'darken' },
2355
- '.mix-blend-lighten': { 'mix-blend-mode': 'lighten' },
2356
- '.mix-blend-color-dodge': { 'mix-blend-mode': 'color-dodge' },
2357
- '.mix-blend-color-burn': { 'mix-blend-mode': 'color-burn' },
2358
- '.mix-blend-hard-light': { 'mix-blend-mode': 'hard-light' },
2359
- '.mix-blend-soft-light': { 'mix-blend-mode': 'soft-light' },
2360
- '.mix-blend-difference': { 'mix-blend-mode': 'difference' },
2361
- '.mix-blend-exclusion': { 'mix-blend-mode': 'exclusion' },
2362
- '.mix-blend-hue': { 'mix-blend-mode': 'hue' },
2363
- '.mix-blend-saturation': { 'mix-blend-mode': 'saturation' },
2364
- '.mix-blend-color': { 'mix-blend-mode': 'color' },
2365
- '.mix-blend-luminosity': { 'mix-blend-mode': 'luminosity' },
2366
- '.mix-blend-plus-darker': { 'mix-blend-mode': 'plus-darker' },
2367
- '.mix-blend-plus-lighter': { 'mix-blend-mode': 'plus-lighter' },
2368
- })
2369
- },
2370
-
2371
- boxShadow: (() => {
2372
- let transformValue = transformThemeValue('boxShadow')
2373
- let defaultBoxShadow = [
2374
- `var(--tw-ring-offset-shadow, 0 0 #0000)`,
2375
- `var(--tw-ring-shadow, 0 0 #0000)`,
2376
- `var(--tw-shadow)`,
2377
- ].join(', ')
2378
-
2379
- return function ({ matchUtilities, addDefaults, theme }) {
2380
- addDefaults('box-shadow', {
2381
- '--tw-ring-offset-shadow': '0 0 #0000',
2382
- '--tw-ring-shadow': '0 0 #0000',
2383
- '--tw-shadow': '0 0 #0000',
2384
- '--tw-shadow-colored': '0 0 #0000',
2385
- })
2386
-
2387
- matchUtilities(
2388
- {
2389
- shadow: (value) => {
2390
- value = transformValue(value)
2391
-
2392
- let ast = parseBoxShadowValue(value)
2393
- for (let shadow of ast) {
2394
- // Don't override color if the whole shadow is a variable
2395
- if (!shadow.valid) {
2396
- continue
2397
- }
2398
-
2399
- shadow.color = 'var(--tw-shadow-color)'
2400
- }
2401
-
2402
- return {
2403
- '@defaults box-shadow': {},
2404
- '--tw-shadow': value === 'none' ? '0 0 #0000' : value,
2405
- '--tw-shadow-colored': value === 'none' ? '0 0 #0000' : formatBoxShadowValue(ast),
2406
- 'box-shadow': defaultBoxShadow,
2407
- }
2408
- },
2409
- },
2410
- { values: theme('boxShadow'), type: ['shadow'] }
2411
- )
2412
- }
2413
- })(),
2414
-
2415
- boxShadowColor: ({ matchUtilities, theme }) => {
2416
- matchUtilities(
2417
- {
2418
- shadow: (value) => {
2419
- return {
2420
- '--tw-shadow-color': toColorValue(value),
2421
- '--tw-shadow': 'var(--tw-shadow-colored)',
2422
- }
2423
- },
2424
- },
2425
- { values: flattenColorPalette(theme('boxShadowColor')), type: ['color', 'any'] }
2426
- )
2427
- },
2428
-
2429
- outlineStyle: ({ addUtilities }) => {
2430
- addUtilities({
2431
- '.outline-none': {
2432
- outline: '2px solid transparent',
2433
- 'outline-offset': '2px',
2434
- },
2435
- '.outline': { 'outline-style': 'solid' },
2436
- '.outline-dashed': { 'outline-style': 'dashed' },
2437
- '.outline-dotted': { 'outline-style': 'dotted' },
2438
- '.outline-double': { 'outline-style': 'double' },
2439
- })
2440
- },
2441
-
2442
- outlineWidth: createUtilityPlugin('outlineWidth', [['outline', ['outline-width']]], {
2443
- type: ['length', 'number', 'percentage'],
2444
- }),
2445
-
2446
- outlineOffset: createUtilityPlugin('outlineOffset', [['outline-offset', ['outline-offset']]], {
2447
- type: ['length', 'number', 'percentage', 'any'],
2448
- supportsNegativeValues: true,
2449
- }),
2450
-
2451
- outlineColor: ({ matchUtilities, theme }) => {
2452
- matchUtilities(
2453
- {
2454
- outline: (value) => {
2455
- return { 'outline-color': toColorValue(value) }
2456
- },
2457
- },
2458
- { values: flattenColorPalette(theme('outlineColor')), type: ['color', 'any'] }
2459
- )
2460
- },
2461
-
2462
- ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme, config }) => {
2463
- let ringColorDefault = (() => {
2464
- if (flagEnabled(config(), 'respectDefaultRingColorOpacity')) {
2465
- return theme('ringColor.DEFAULT')
2466
- }
2467
-
2468
- let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
2469
-
2470
- if (!theme('ringColor')?.DEFAULT) {
2471
- return `rgb(147 197 253 / ${ringOpacityDefault})`
2472
- }
2473
-
2474
- return withAlphaValue(
2475
- theme('ringColor')?.DEFAULT,
2476
- ringOpacityDefault,
2477
- `rgb(147 197 253 / ${ringOpacityDefault})`
2478
- )
2479
- })()
2480
-
2481
- addDefaults('ring-width', {
2482
- '--tw-ring-inset': ' ',
2483
- '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
2484
- '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
2485
- '--tw-ring-color': ringColorDefault,
2486
- '--tw-ring-offset-shadow': '0 0 #0000',
2487
- '--tw-ring-shadow': '0 0 #0000',
2488
- '--tw-shadow': '0 0 #0000',
2489
- '--tw-shadow-colored': '0 0 #0000',
2490
- })
2491
-
2492
- matchUtilities(
2493
- {
2494
- ring: (value) => {
2495
- return {
2496
- '@defaults ring-width': {},
2497
- '--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
2498
- '--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
2499
- 'box-shadow': [
2500
- `var(--tw-ring-offset-shadow)`,
2501
- `var(--tw-ring-shadow)`,
2502
- `var(--tw-shadow, 0 0 #0000)`,
2503
- ].join(', '),
2504
- }
2505
- },
2506
- },
2507
- { values: theme('ringWidth'), type: 'length' }
2508
- )
2509
-
2510
- addUtilities({
2511
- '.ring-inset': { '@defaults ring-width': {}, '--tw-ring-inset': 'inset' },
2512
- })
2513
- },
2514
-
2515
- ringColor: ({ matchUtilities, theme, corePlugins }) => {
2516
- matchUtilities(
2517
- {
2518
- ring: (value) => {
2519
- if (!corePlugins('ringOpacity')) {
2520
- return {
2521
- '--tw-ring-color': toColorValue(value),
2522
- }
2523
- }
2524
-
2525
- return withAlphaVariable({
2526
- color: value,
2527
- property: '--tw-ring-color',
2528
- variable: '--tw-ring-opacity',
2529
- })
2530
- },
2531
- },
2532
- {
2533
- values: Object.fromEntries(
2534
- Object.entries(flattenColorPalette(theme('ringColor'))).filter(
2535
- ([modifier]) => modifier !== 'DEFAULT'
2536
- )
2537
- ),
2538
- type: ['color', 'any'],
2539
- }
2540
- )
2541
- },
2542
-
2543
- ringOpacity: (helpers) => {
2544
- let { config } = helpers
2545
-
2546
- return createUtilityPlugin('ringOpacity', [['ring-opacity', ['--tw-ring-opacity']]], {
2547
- filterDefault: !flagEnabled(config(), 'respectDefaultRingColorOpacity'),
2548
- })(helpers)
2549
- },
2550
- ringOffsetWidth: createUtilityPlugin(
2551
- 'ringOffsetWidth',
2552
- [['ring-offset', ['--tw-ring-offset-width']]],
2553
- { type: 'length' }
2554
- ),
2555
-
2556
- ringOffsetColor: ({ matchUtilities, theme }) => {
2557
- matchUtilities(
2558
- {
2559
- 'ring-offset': (value) => {
2560
- return {
2561
- '--tw-ring-offset-color': toColorValue(value),
2562
- }
2563
- },
2564
- },
2565
- { values: flattenColorPalette(theme('ringOffsetColor')), type: ['color', 'any'] }
2566
- )
2567
- },
2568
-
2569
- blur: ({ matchUtilities, theme }) => {
2570
- matchUtilities(
2571
- {
2572
- blur: (value) => {
2573
- return {
2574
- '--tw-blur': `blur(${value})`,
2575
- '@defaults filter': {},
2576
- filter: cssFilterValue,
2577
- }
2578
- },
2579
- },
2580
- { values: theme('blur') }
2581
- )
2582
- },
2583
-
2584
- brightness: ({ matchUtilities, theme }) => {
2585
- matchUtilities(
2586
- {
2587
- brightness: (value) => {
2588
- return {
2589
- '--tw-brightness': `brightness(${value})`,
2590
- '@defaults filter': {},
2591
- filter: cssFilterValue,
2592
- }
2593
- },
2594
- },
2595
- { values: theme('brightness') }
2596
- )
2597
- },
2598
-
2599
- contrast: ({ matchUtilities, theme }) => {
2600
- matchUtilities(
2601
- {
2602
- contrast: (value) => {
2603
- return {
2604
- '--tw-contrast': `contrast(${value})`,
2605
- '@defaults filter': {},
2606
- filter: cssFilterValue,
2607
- }
2608
- },
2609
- },
2610
- { values: theme('contrast') }
2611
- )
2612
- },
2613
-
2614
- dropShadow: ({ matchUtilities, theme }) => {
2615
- matchUtilities(
2616
- {
2617
- 'drop-shadow': (value) => {
2618
- return {
2619
- '--tw-drop-shadow': Array.isArray(value)
2620
- ? value.map((v) => `drop-shadow(${v})`).join(' ')
2621
- : `drop-shadow(${value})`,
2622
- '@defaults filter': {},
2623
- filter: cssFilterValue,
2624
- }
2625
- },
2626
- },
2627
- { values: theme('dropShadow') }
2628
- )
2629
- },
2630
-
2631
- grayscale: ({ matchUtilities, theme }) => {
2632
- matchUtilities(
2633
- {
2634
- grayscale: (value) => {
2635
- return {
2636
- '--tw-grayscale': `grayscale(${value})`,
2637
- '@defaults filter': {},
2638
- filter: cssFilterValue,
2639
- }
2640
- },
2641
- },
2642
- { values: theme('grayscale') }
2643
- )
2644
- },
2645
-
2646
- hueRotate: ({ matchUtilities, theme }) => {
2647
- matchUtilities(
2648
- {
2649
- 'hue-rotate': (value) => {
2650
- return {
2651
- '--tw-hue-rotate': `hue-rotate(${value})`,
2652
- '@defaults filter': {},
2653
- filter: cssFilterValue,
2654
- }
2655
- },
2656
- },
2657
- { values: theme('hueRotate'), supportsNegativeValues: true }
2658
- )
2659
- },
2660
-
2661
- invert: ({ matchUtilities, theme }) => {
2662
- matchUtilities(
2663
- {
2664
- invert: (value) => {
2665
- return {
2666
- '--tw-invert': `invert(${value})`,
2667
- '@defaults filter': {},
2668
- filter: cssFilterValue,
2669
- }
2670
- },
2671
- },
2672
- { values: theme('invert') }
2673
- )
2674
- },
2675
-
2676
- saturate: ({ matchUtilities, theme }) => {
2677
- matchUtilities(
2678
- {
2679
- saturate: (value) => {
2680
- return {
2681
- '--tw-saturate': `saturate(${value})`,
2682
- '@defaults filter': {},
2683
- filter: cssFilterValue,
2684
- }
2685
- },
2686
- },
2687
- { values: theme('saturate') }
2688
- )
2689
- },
2690
-
2691
- sepia: ({ matchUtilities, theme }) => {
2692
- matchUtilities(
2693
- {
2694
- sepia: (value) => {
2695
- return {
2696
- '--tw-sepia': `sepia(${value})`,
2697
- '@defaults filter': {},
2698
- filter: cssFilterValue,
2699
- }
2700
- },
2701
- },
2702
- { values: theme('sepia') }
2703
- )
2704
- },
2705
-
2706
- filter: ({ addDefaults, addUtilities }) => {
2707
- addDefaults('filter', {
2708
- '--tw-blur': ' ',
2709
- '--tw-brightness': ' ',
2710
- '--tw-contrast': ' ',
2711
- '--tw-grayscale': ' ',
2712
- '--tw-hue-rotate': ' ',
2713
- '--tw-invert': ' ',
2714
- '--tw-saturate': ' ',
2715
- '--tw-sepia': ' ',
2716
- '--tw-drop-shadow': ' ',
2717
- })
2718
- addUtilities({
2719
- '.filter': { '@defaults filter': {}, filter: cssFilterValue },
2720
- '.filter-none': { filter: 'none' },
2721
- })
2722
- },
2723
-
2724
- backdropBlur: ({ matchUtilities, theme }) => {
2725
- matchUtilities(
2726
- {
2727
- 'backdrop-blur': (value) => {
2728
- return {
2729
- '--tw-backdrop-blur': `blur(${value})`,
2730
- '@defaults backdrop-filter': {},
2731
- 'backdrop-filter': cssBackdropFilterValue,
2732
- }
2733
- },
2734
- },
2735
- { values: theme('backdropBlur') }
2736
- )
2737
- },
2738
-
2739
- backdropBrightness: ({ matchUtilities, theme }) => {
2740
- matchUtilities(
2741
- {
2742
- 'backdrop-brightness': (value) => {
2743
- return {
2744
- '--tw-backdrop-brightness': `brightness(${value})`,
2745
- '@defaults backdrop-filter': {},
2746
- 'backdrop-filter': cssBackdropFilterValue,
2747
- }
2748
- },
2749
- },
2750
- { values: theme('backdropBrightness') }
2751
- )
2752
- },
2753
-
2754
- backdropContrast: ({ matchUtilities, theme }) => {
2755
- matchUtilities(
2756
- {
2757
- 'backdrop-contrast': (value) => {
2758
- return {
2759
- '--tw-backdrop-contrast': `contrast(${value})`,
2760
- '@defaults backdrop-filter': {},
2761
- 'backdrop-filter': cssBackdropFilterValue,
2762
- }
2763
- },
2764
- },
2765
- { values: theme('backdropContrast') }
2766
- )
2767
- },
2768
-
2769
- backdropGrayscale: ({ matchUtilities, theme }) => {
2770
- matchUtilities(
2771
- {
2772
- 'backdrop-grayscale': (value) => {
2773
- return {
2774
- '--tw-backdrop-grayscale': `grayscale(${value})`,
2775
- '@defaults backdrop-filter': {},
2776
- 'backdrop-filter': cssBackdropFilterValue,
2777
- }
2778
- },
2779
- },
2780
- { values: theme('backdropGrayscale') }
2781
- )
2782
- },
2783
-
2784
- backdropHueRotate: ({ matchUtilities, theme }) => {
2785
- matchUtilities(
2786
- {
2787
- 'backdrop-hue-rotate': (value) => {
2788
- return {
2789
- '--tw-backdrop-hue-rotate': `hue-rotate(${value})`,
2790
- '@defaults backdrop-filter': {},
2791
- 'backdrop-filter': cssBackdropFilterValue,
2792
- }
2793
- },
2794
- },
2795
- { values: theme('backdropHueRotate'), supportsNegativeValues: true }
2796
- )
2797
- },
2798
-
2799
- backdropInvert: ({ matchUtilities, theme }) => {
2800
- matchUtilities(
2801
- {
2802
- 'backdrop-invert': (value) => {
2803
- return {
2804
- '--tw-backdrop-invert': `invert(${value})`,
2805
- '@defaults backdrop-filter': {},
2806
- 'backdrop-filter': cssBackdropFilterValue,
2807
- }
2808
- },
2809
- },
2810
- { values: theme('backdropInvert') }
2811
- )
2812
- },
2813
-
2814
- backdropOpacity: ({ matchUtilities, theme }) => {
2815
- matchUtilities(
2816
- {
2817
- 'backdrop-opacity': (value) => {
2818
- return {
2819
- '--tw-backdrop-opacity': `opacity(${value})`,
2820
- '@defaults backdrop-filter': {},
2821
- 'backdrop-filter': cssBackdropFilterValue,
2822
- }
2823
- },
2824
- },
2825
- { values: theme('backdropOpacity') }
2826
- )
2827
- },
2828
-
2829
- backdropSaturate: ({ matchUtilities, theme }) => {
2830
- matchUtilities(
2831
- {
2832
- 'backdrop-saturate': (value) => {
2833
- return {
2834
- '--tw-backdrop-saturate': `saturate(${value})`,
2835
- '@defaults backdrop-filter': {},
2836
- 'backdrop-filter': cssBackdropFilterValue,
2837
- }
2838
- },
2839
- },
2840
- { values: theme('backdropSaturate') }
2841
- )
2842
- },
2843
-
2844
- backdropSepia: ({ matchUtilities, theme }) => {
2845
- matchUtilities(
2846
- {
2847
- 'backdrop-sepia': (value) => {
2848
- return {
2849
- '--tw-backdrop-sepia': `sepia(${value})`,
2850
- '@defaults backdrop-filter': {},
2851
- 'backdrop-filter': cssBackdropFilterValue,
2852
- }
2853
- },
2854
- },
2855
- { values: theme('backdropSepia') }
2856
- )
2857
- },
2858
-
2859
- backdropFilter: ({ addDefaults, addUtilities }) => {
2860
- addDefaults('backdrop-filter', {
2861
- '--tw-backdrop-blur': ' ',
2862
- '--tw-backdrop-brightness': ' ',
2863
- '--tw-backdrop-contrast': ' ',
2864
- '--tw-backdrop-grayscale': ' ',
2865
- '--tw-backdrop-hue-rotate': ' ',
2866
- '--tw-backdrop-invert': ' ',
2867
- '--tw-backdrop-opacity': ' ',
2868
- '--tw-backdrop-saturate': ' ',
2869
- '--tw-backdrop-sepia': ' ',
2870
- })
2871
- addUtilities({
2872
- '.backdrop-filter': {
2873
- '@defaults backdrop-filter': {},
2874
- 'backdrop-filter': cssBackdropFilterValue,
2875
- },
2876
- '.backdrop-filter-none': { 'backdrop-filter': 'none' },
2877
- })
2878
- },
2879
-
2880
- transitionProperty: ({ matchUtilities, theme }) => {
2881
- let defaultTimingFunction = theme('transitionTimingFunction.DEFAULT')
2882
- let defaultDuration = theme('transitionDuration.DEFAULT')
2883
-
2884
- matchUtilities(
2885
- {
2886
- transition: (value) => {
2887
- return {
2888
- 'transition-property': value,
2889
- ...(value === 'none'
2890
- ? {}
2891
- : {
2892
- 'transition-timing-function': defaultTimingFunction,
2893
- 'transition-duration': defaultDuration,
2894
- }),
2895
- }
2896
- },
2897
- },
2898
- { values: theme('transitionProperty') }
2899
- )
2900
- },
2901
-
2902
- transitionDelay: createUtilityPlugin('transitionDelay', [['delay', ['transitionDelay']]]),
2903
- transitionDuration: createUtilityPlugin(
2904
- 'transitionDuration',
2905
- [['duration', ['transitionDuration']]],
2906
- { filterDefault: true }
2907
- ),
2908
- transitionTimingFunction: createUtilityPlugin(
2909
- 'transitionTimingFunction',
2910
- [['ease', ['transitionTimingFunction']]],
2911
- { filterDefault: true }
2912
- ),
2913
- willChange: createUtilityPlugin('willChange', [['will-change', ['will-change']]]),
2914
- contain: ({ addDefaults, addUtilities }) => {
2915
- let cssContainValue =
2916
- 'var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style)'
2917
-
2918
- addDefaults('contain', {
2919
- '--tw-contain-size': ' ',
2920
- '--tw-contain-layout': ' ',
2921
- '--tw-contain-paint': ' ',
2922
- '--tw-contain-style': ' ',
2923
- })
2924
-
2925
- addUtilities({
2926
- '.contain-none': { contain: 'none' },
2927
- '.contain-content': { contain: 'content' },
2928
- '.contain-strict': { contain: 'strict' },
2929
- '.contain-size': {
2930
- '@defaults contain': {},
2931
- '--tw-contain-size': 'size',
2932
- contain: cssContainValue,
2933
- },
2934
- '.contain-inline-size': {
2935
- '@defaults contain': {},
2936
- '--tw-contain-size': 'inline-size',
2937
- contain: cssContainValue,
2938
- },
2939
- '.contain-layout': {
2940
- '@defaults contain': {},
2941
- '--tw-contain-layout': 'layout',
2942
- contain: cssContainValue,
2943
- },
2944
- '.contain-paint': {
2945
- '@defaults contain': {},
2946
- '--tw-contain-paint': 'paint',
2947
- contain: cssContainValue,
2948
- },
2949
- '.contain-style': {
2950
- '@defaults contain': {},
2951
- '--tw-contain-style': 'style',
2952
- contain: cssContainValue,
2953
- },
2954
- })
2955
- },
2956
- content: createUtilityPlugin('content', [
2957
- ['content', ['--tw-content', ['content', 'var(--tw-content)']]],
2958
- ]),
2959
- forcedColorAdjust: ({ addUtilities }) => {
2960
- addUtilities({
2961
- '.forced-color-adjust-auto': { 'forced-color-adjust': 'auto' },
2962
- '.forced-color-adjust-none': { 'forced-color-adjust': 'none' },
2963
- })
2964
- },
2965
- }