tailwindcss 3.4.1 → 4.0.0-alpha.2

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 (280) hide show
  1. package/README.md +5 -6
  2. package/dist/lib.d.mts +324 -0
  3. package/dist/lib.d.ts +324 -0
  4. package/dist/lib.js +11 -0
  5. package/dist/lib.mjs +11 -0
  6. package/index.css +5 -0
  7. package/package.json +29 -107
  8. package/preflight.css +355 -0
  9. package/theme.css +465 -0
  10. package/CHANGELOG.md +0 -2571
  11. package/base.css +0 -1
  12. package/colors.d.ts +0 -3
  13. package/colors.js +0 -2
  14. package/components.css +0 -1
  15. package/defaultConfig.d.ts +0 -3
  16. package/defaultConfig.js +0 -2
  17. package/defaultTheme.d.ts +0 -4
  18. package/defaultTheme.js +0 -2
  19. package/lib/cli/build/deps.js +0 -62
  20. package/lib/cli/build/index.js +0 -54
  21. package/lib/cli/build/plugin.js +0 -378
  22. package/lib/cli/build/utils.js +0 -88
  23. package/lib/cli/build/watching.js +0 -182
  24. package/lib/cli/help/index.js +0 -73
  25. package/lib/cli/index.js +0 -230
  26. package/lib/cli/init/index.js +0 -63
  27. package/lib/cli-peer-dependencies.js +0 -36
  28. package/lib/cli.js +0 -7
  29. package/lib/corePluginList.js +0 -190
  30. package/lib/corePlugins.js +0 -4282
  31. package/lib/css/LICENSE +0 -25
  32. package/lib/css/preflight.css +0 -385
  33. package/lib/featureFlags.js +0 -83
  34. package/lib/index.js +0 -2
  35. package/lib/lib/cacheInvalidation.js +0 -92
  36. package/lib/lib/collapseAdjacentRules.js +0 -61
  37. package/lib/lib/collapseDuplicateDeclarations.js +0 -85
  38. package/lib/lib/content.js +0 -181
  39. package/lib/lib/defaultExtractor.js +0 -251
  40. package/lib/lib/detectNesting.js +0 -45
  41. package/lib/lib/evaluateTailwindFunctions.js +0 -238
  42. package/lib/lib/expandApplyAtRules.js +0 -540
  43. package/lib/lib/expandTailwindAtRules.js +0 -291
  44. package/lib/lib/findAtConfigPath.js +0 -46
  45. package/lib/lib/generateRules.js +0 -904
  46. package/lib/lib/getModuleDependencies.js +0 -99
  47. package/lib/lib/load-config.js +0 -53
  48. package/lib/lib/normalizeTailwindDirectives.js +0 -89
  49. package/lib/lib/offsets.js +0 -306
  50. package/lib/lib/partitionApplyAtRules.js +0 -58
  51. package/lib/lib/regex.js +0 -74
  52. package/lib/lib/remap-bitfield.js +0 -89
  53. package/lib/lib/resolveDefaultsAtRules.js +0 -165
  54. package/lib/lib/setupContextUtils.js +0 -1294
  55. package/lib/lib/setupTrackingContext.js +0 -166
  56. package/lib/lib/sharedState.js +0 -87
  57. package/lib/lib/substituteScreenAtRules.js +0 -31
  58. package/lib/oxide/cli/build/deps.js +0 -89
  59. package/lib/oxide/cli/build/index.js +0 -53
  60. package/lib/oxide/cli/build/plugin.js +0 -375
  61. package/lib/oxide/cli/build/utils.js +0 -87
  62. package/lib/oxide/cli/build/watching.js +0 -179
  63. package/lib/oxide/cli/help/index.js +0 -72
  64. package/lib/oxide/cli/index.js +0 -214
  65. package/lib/oxide/cli/init/index.js +0 -52
  66. package/lib/oxide/cli.js +0 -5
  67. package/lib/oxide/postcss-plugin.js +0 -2
  68. package/lib/plugin.js +0 -98
  69. package/lib/postcss-plugins/nesting/README.md +0 -42
  70. package/lib/postcss-plugins/nesting/index.js +0 -21
  71. package/lib/postcss-plugins/nesting/plugin.js +0 -89
  72. package/lib/processTailwindFeatures.js +0 -64
  73. package/lib/public/colors.js +0 -355
  74. package/lib/public/create-plugin.js +0 -17
  75. package/lib/public/default-config.js +0 -18
  76. package/lib/public/default-theme.js +0 -18
  77. package/lib/public/load-config.js +0 -12
  78. package/lib/public/resolve-config.js +0 -24
  79. package/lib/util/applyImportantSelector.js +0 -36
  80. package/lib/util/bigSign.js +0 -13
  81. package/lib/util/buildMediaQuery.js +0 -27
  82. package/lib/util/cloneDeep.js +0 -22
  83. package/lib/util/cloneNodes.js +0 -54
  84. package/lib/util/color.js +0 -116
  85. package/lib/util/colorNames.js +0 -752
  86. package/lib/util/configurePlugins.js +0 -23
  87. package/lib/util/createPlugin.js +0 -32
  88. package/lib/util/createUtilityPlugin.js +0 -53
  89. package/lib/util/dataTypes.js +0 -415
  90. package/lib/util/defaults.js +0 -27
  91. package/lib/util/escapeClassName.js +0 -24
  92. package/lib/util/escapeCommas.js +0 -13
  93. package/lib/util/flattenColorPalette.js +0 -18
  94. package/lib/util/formatVariantSelector.js +0 -270
  95. package/lib/util/getAllConfigs.js +0 -50
  96. package/lib/util/hashConfig.js +0 -21
  97. package/lib/util/isKeyframeRule.js +0 -13
  98. package/lib/util/isPlainObject.js +0 -17
  99. package/lib/util/isSyntacticallyValidPropertyValue.js +0 -74
  100. package/lib/util/log.js +0 -61
  101. package/lib/util/nameClass.js +0 -49
  102. package/lib/util/negateValue.js +0 -36
  103. package/lib/util/normalizeConfig.js +0 -282
  104. package/lib/util/normalizeScreens.js +0 -178
  105. package/lib/util/parseAnimationValue.js +0 -93
  106. package/lib/util/parseBoxShadowValue.js +0 -88
  107. package/lib/util/parseDependency.js +0 -47
  108. package/lib/util/parseGlob.js +0 -36
  109. package/lib/util/parseObjectStyles.js +0 -36
  110. package/lib/util/pluginUtils.js +0 -289
  111. package/lib/util/prefixSelector.js +0 -39
  112. package/lib/util/pseudoElements.js +0 -212
  113. package/lib/util/removeAlphaVariables.js +0 -31
  114. package/lib/util/resolveConfig.js +0 -256
  115. package/lib/util/resolveConfigPath.js +0 -70
  116. package/lib/util/responsive.js +0 -24
  117. package/lib/util/splitAtTopLevelOnly.js +0 -51
  118. package/lib/util/tap.js +0 -14
  119. package/lib/util/toColorValue.js +0 -13
  120. package/lib/util/toPath.js +0 -32
  121. package/lib/util/transformThemeValue.js +0 -73
  122. package/lib/util/validateConfig.js +0 -37
  123. package/lib/util/validateFormalSyntax.js +0 -26
  124. package/lib/util/withAlphaVariable.js +0 -79
  125. package/lib/value-parser/LICENSE +0 -22
  126. package/lib/value-parser/README.md +0 -3
  127. package/lib/value-parser/index.d.js +0 -2
  128. package/lib/value-parser/index.js +0 -22
  129. package/lib/value-parser/parse.js +0 -259
  130. package/lib/value-parser/stringify.js +0 -38
  131. package/lib/value-parser/unit.js +0 -86
  132. package/lib/value-parser/walk.js +0 -16
  133. package/loadConfig.d.ts +0 -4
  134. package/loadConfig.js +0 -2
  135. package/nesting/index.d.ts +0 -4
  136. package/nesting/index.js +0 -2
  137. package/peers/index.js +0 -96624
  138. package/plugin.d.ts +0 -11
  139. package/plugin.js +0 -2
  140. package/prettier.config.js +0 -19
  141. package/resolveConfig.d.ts +0 -31
  142. package/resolveConfig.js +0 -2
  143. package/screens.css +0 -1
  144. package/scripts/create-plugin-list.js +0 -10
  145. package/scripts/generate-types.js +0 -104
  146. package/scripts/release-channel.js +0 -18
  147. package/scripts/release-notes.js +0 -21
  148. package/scripts/swap-engines.js +0 -40
  149. package/scripts/type-utils.js +0 -27
  150. package/src/cli/build/deps.js +0 -56
  151. package/src/cli/build/index.js +0 -49
  152. package/src/cli/build/plugin.js +0 -444
  153. package/src/cli/build/utils.js +0 -76
  154. package/src/cli/build/watching.js +0 -229
  155. package/src/cli/help/index.js +0 -70
  156. package/src/cli/index.js +0 -216
  157. package/src/cli/init/index.js +0 -79
  158. package/src/cli-peer-dependencies.js +0 -15
  159. package/src/cli.js +0 -7
  160. package/src/corePluginList.js +0 -1
  161. package/src/corePlugins.js +0 -2943
  162. package/src/css/LICENSE +0 -25
  163. package/src/css/preflight.css +0 -385
  164. package/src/featureFlags.js +0 -66
  165. package/src/index.js +0 -1
  166. package/src/lib/cacheInvalidation.js +0 -52
  167. package/src/lib/collapseAdjacentRules.js +0 -58
  168. package/src/lib/collapseDuplicateDeclarations.js +0 -93
  169. package/src/lib/content.js +0 -208
  170. package/src/lib/defaultExtractor.js +0 -230
  171. package/src/lib/detectNesting.js +0 -47
  172. package/src/lib/evaluateTailwindFunctions.js +0 -272
  173. package/src/lib/expandApplyAtRules.js +0 -620
  174. package/src/lib/expandTailwindAtRules.js +0 -300
  175. package/src/lib/findAtConfigPath.js +0 -48
  176. package/src/lib/generateRules.js +0 -951
  177. package/src/lib/getModuleDependencies.js +0 -79
  178. package/src/lib/load-config.ts +0 -39
  179. package/src/lib/normalizeTailwindDirectives.js +0 -84
  180. package/src/lib/offsets.js +0 -373
  181. package/src/lib/partitionApplyAtRules.js +0 -52
  182. package/src/lib/regex.js +0 -74
  183. package/src/lib/remap-bitfield.js +0 -82
  184. package/src/lib/resolveDefaultsAtRules.js +0 -163
  185. package/src/lib/setupContextUtils.js +0 -1366
  186. package/src/lib/setupTrackingContext.js +0 -169
  187. package/src/lib/sharedState.js +0 -61
  188. package/src/lib/substituteScreenAtRules.js +0 -19
  189. package/src/oxide/cli/build/deps.ts +0 -91
  190. package/src/oxide/cli/build/index.ts +0 -47
  191. package/src/oxide/cli/build/plugin.ts +0 -442
  192. package/src/oxide/cli/build/utils.ts +0 -74
  193. package/src/oxide/cli/build/watching.ts +0 -225
  194. package/src/oxide/cli/help/index.ts +0 -69
  195. package/src/oxide/cli/index.ts +0 -204
  196. package/src/oxide/cli/init/index.ts +0 -59
  197. package/src/oxide/cli.ts +0 -1
  198. package/src/oxide/postcss-plugin.ts +0 -1
  199. package/src/plugin.js +0 -107
  200. package/src/postcss-plugins/nesting/README.md +0 -42
  201. package/src/postcss-plugins/nesting/index.js +0 -13
  202. package/src/postcss-plugins/nesting/plugin.js +0 -80
  203. package/src/processTailwindFeatures.js +0 -59
  204. package/src/public/colors.js +0 -322
  205. package/src/public/create-plugin.js +0 -2
  206. package/src/public/default-config.js +0 -4
  207. package/src/public/default-theme.js +0 -4
  208. package/src/public/load-config.js +0 -2
  209. package/src/public/resolve-config.js +0 -7
  210. package/src/util/applyImportantSelector.js +0 -27
  211. package/src/util/bigSign.js +0 -3
  212. package/src/util/buildMediaQuery.js +0 -22
  213. package/src/util/cloneDeep.js +0 -11
  214. package/src/util/cloneNodes.js +0 -49
  215. package/src/util/color.js +0 -88
  216. package/src/util/colorNames.js +0 -150
  217. package/src/util/configurePlugins.js +0 -23
  218. package/src/util/createPlugin.js +0 -27
  219. package/src/util/createUtilityPlugin.js +0 -37
  220. package/src/util/dataTypes.js +0 -406
  221. package/src/util/defaults.js +0 -17
  222. package/src/util/escapeClassName.js +0 -8
  223. package/src/util/escapeCommas.js +0 -3
  224. package/src/util/flattenColorPalette.js +0 -13
  225. package/src/util/formatVariantSelector.js +0 -324
  226. package/src/util/getAllConfigs.js +0 -38
  227. package/src/util/hashConfig.js +0 -5
  228. package/src/util/isKeyframeRule.js +0 -3
  229. package/src/util/isPlainObject.js +0 -8
  230. package/src/util/isSyntacticallyValidPropertyValue.js +0 -61
  231. package/src/util/log.js +0 -29
  232. package/src/util/nameClass.js +0 -30
  233. package/src/util/negateValue.js +0 -24
  234. package/src/util/normalizeConfig.js +0 -301
  235. package/src/util/normalizeScreens.js +0 -140
  236. package/src/util/parseAnimationValue.js +0 -68
  237. package/src/util/parseBoxShadowValue.js +0 -72
  238. package/src/util/parseDependency.js +0 -44
  239. package/src/util/parseGlob.js +0 -24
  240. package/src/util/parseObjectStyles.js +0 -19
  241. package/src/util/pluginUtils.js +0 -307
  242. package/src/util/prefixSelector.js +0 -33
  243. package/src/util/pseudoElements.js +0 -171
  244. package/src/util/removeAlphaVariables.js +0 -24
  245. package/src/util/resolveConfig.js +0 -277
  246. package/src/util/resolveConfigPath.js +0 -66
  247. package/src/util/responsive.js +0 -10
  248. package/src/util/splitAtTopLevelOnly.js +0 -52
  249. package/src/util/tap.js +0 -4
  250. package/src/util/toColorValue.js +0 -3
  251. package/src/util/toPath.js +0 -26
  252. package/src/util/transformThemeValue.js +0 -62
  253. package/src/util/validateConfig.js +0 -26
  254. package/src/util/validateFormalSyntax.js +0 -34
  255. package/src/util/withAlphaVariable.js +0 -49
  256. package/src/value-parser/LICENSE +0 -22
  257. package/src/value-parser/README.md +0 -3
  258. package/src/value-parser/index.d.ts +0 -177
  259. package/src/value-parser/index.js +0 -28
  260. package/src/value-parser/parse.js +0 -303
  261. package/src/value-parser/stringify.js +0 -41
  262. package/src/value-parser/unit.js +0 -118
  263. package/src/value-parser/walk.js +0 -18
  264. package/stubs/.gitignore +0 -1
  265. package/stubs/.prettierrc.json +0 -6
  266. package/stubs/config.full.js +0 -1062
  267. package/stubs/config.simple.js +0 -7
  268. package/stubs/postcss.config.cjs +0 -6
  269. package/stubs/postcss.config.js +0 -6
  270. package/stubs/tailwind.config.cjs +0 -2
  271. package/stubs/tailwind.config.js +0 -2
  272. package/stubs/tailwind.config.ts +0 -3
  273. package/tailwind.css +0 -5
  274. package/types/config.d.ts +0 -376
  275. package/types/generated/.gitkeep +0 -0
  276. package/types/generated/colors.d.ts +0 -298
  277. package/types/generated/corePluginList.d.ts +0 -1
  278. package/types/generated/default-theme.d.ts +0 -397
  279. package/types/index.d.ts +0 -11
  280. package/variants.css +0 -1
@@ -1,2943 +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
- if (__OXIDE__) {
1344
- return {
1345
- '& > :not([hidden]) ~ :not([hidden])': {
1346
- '--tw-space-x-reverse': '0',
1347
- 'margin-inline-end': `calc(${value} * var(--tw-space-x-reverse))`,
1348
- 'margin-inline-start': `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`,
1349
- },
1350
- }
1351
- }
1352
-
1353
- return {
1354
- '& > :not([hidden]) ~ :not([hidden])': {
1355
- '--tw-space-x-reverse': '0',
1356
- 'margin-right': `calc(${value} * var(--tw-space-x-reverse))`,
1357
- 'margin-left': `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`,
1358
- },
1359
- }
1360
- },
1361
- 'space-y': (value) => {
1362
- value = value === '0' ? '0px' : value
1363
-
1364
- return {
1365
- '& > :not([hidden]) ~ :not([hidden])': {
1366
- '--tw-space-y-reverse': '0',
1367
- 'margin-top': `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`,
1368
- 'margin-bottom': `calc(${value} * var(--tw-space-y-reverse))`,
1369
- },
1370
- }
1371
- },
1372
- },
1373
- { values: theme('space'), supportsNegativeValues: true }
1374
- )
1375
-
1376
- addUtilities({
1377
- '.space-y-reverse > :not([hidden]) ~ :not([hidden])': { '--tw-space-y-reverse': '1' },
1378
- '.space-x-reverse > :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '1' },
1379
- })
1380
- },
1381
-
1382
- divideWidth: ({ matchUtilities, addUtilities, theme }) => {
1383
- matchUtilities(
1384
- {
1385
- 'divide-x': (value) => {
1386
- value = value === '0' ? '0px' : value
1387
-
1388
- if (__OXIDE__) {
1389
- return {
1390
- '& > :not([hidden]) ~ :not([hidden])': {
1391
- '@defaults border-width': {},
1392
- '--tw-divide-x-reverse': '0',
1393
- 'border-inline-end-width': `calc(${value} * var(--tw-divide-x-reverse))`,
1394
- 'border-inline-start-width': `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`,
1395
- },
1396
- }
1397
- }
1398
-
1399
- return {
1400
- '& > :not([hidden]) ~ :not([hidden])': {
1401
- '@defaults border-width': {},
1402
- '--tw-divide-x-reverse': '0',
1403
- 'border-right-width': `calc(${value} * var(--tw-divide-x-reverse))`,
1404
- 'border-left-width': `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`,
1405
- },
1406
- }
1407
- },
1408
- 'divide-y': (value) => {
1409
- value = value === '0' ? '0px' : value
1410
-
1411
- return {
1412
- '& > :not([hidden]) ~ :not([hidden])': {
1413
- '@defaults border-width': {},
1414
- '--tw-divide-y-reverse': '0',
1415
- 'border-top-width': `calc(${value} * calc(1 - var(--tw-divide-y-reverse)))`,
1416
- 'border-bottom-width': `calc(${value} * var(--tw-divide-y-reverse))`,
1417
- },
1418
- }
1419
- },
1420
- },
1421
- { values: theme('divideWidth'), type: ['line-width', 'length', 'any'] }
1422
- )
1423
-
1424
- addUtilities({
1425
- '.divide-y-reverse > :not([hidden]) ~ :not([hidden])': {
1426
- '@defaults border-width': {},
1427
- '--tw-divide-y-reverse': '1',
1428
- },
1429
- '.divide-x-reverse > :not([hidden]) ~ :not([hidden])': {
1430
- '@defaults border-width': {},
1431
- '--tw-divide-x-reverse': '1',
1432
- },
1433
- })
1434
- },
1435
-
1436
- divideStyle: ({ addUtilities }) => {
1437
- addUtilities({
1438
- '.divide-solid > :not([hidden]) ~ :not([hidden])': { 'border-style': 'solid' },
1439
- '.divide-dashed > :not([hidden]) ~ :not([hidden])': { 'border-style': 'dashed' },
1440
- '.divide-dotted > :not([hidden]) ~ :not([hidden])': { 'border-style': 'dotted' },
1441
- '.divide-double > :not([hidden]) ~ :not([hidden])': { 'border-style': 'double' },
1442
- '.divide-none > :not([hidden]) ~ :not([hidden])': { 'border-style': 'none' },
1443
- })
1444
- },
1445
-
1446
- divideColor: ({ matchUtilities, theme, corePlugins }) => {
1447
- matchUtilities(
1448
- {
1449
- divide: (value) => {
1450
- if (!corePlugins('divideOpacity')) {
1451
- return {
1452
- ['& > :not([hidden]) ~ :not([hidden])']: {
1453
- 'border-color': toColorValue(value),
1454
- },
1455
- }
1456
- }
1457
-
1458
- return {
1459
- ['& > :not([hidden]) ~ :not([hidden])']: withAlphaVariable({
1460
- color: value,
1461
- property: 'border-color',
1462
- variable: '--tw-divide-opacity',
1463
- }),
1464
- }
1465
- },
1466
- },
1467
- {
1468
- values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('divideColor'))),
1469
- type: ['color', 'any'],
1470
- }
1471
- )
1472
- },
1473
-
1474
- divideOpacity: ({ matchUtilities, theme }) => {
1475
- matchUtilities(
1476
- {
1477
- 'divide-opacity': (value) => {
1478
- return { [`& > :not([hidden]) ~ :not([hidden])`]: { '--tw-divide-opacity': value } }
1479
- },
1480
- },
1481
- { values: theme('divideOpacity') }
1482
- )
1483
- },
1484
-
1485
- placeSelf: ({ addUtilities }) => {
1486
- addUtilities({
1487
- '.place-self-auto': { 'place-self': 'auto' },
1488
- '.place-self-start': { 'place-self': 'start' },
1489
- '.place-self-end': { 'place-self': 'end' },
1490
- '.place-self-center': { 'place-self': 'center' },
1491
- '.place-self-stretch': { 'place-self': 'stretch' },
1492
- })
1493
- },
1494
-
1495
- alignSelf: ({ addUtilities }) => {
1496
- addUtilities({
1497
- '.self-auto': { 'align-self': 'auto' },
1498
- '.self-start': { 'align-self': 'flex-start' },
1499
- '.self-end': { 'align-self': 'flex-end' },
1500
- '.self-center': { 'align-self': 'center' },
1501
- '.self-stretch': { 'align-self': 'stretch' },
1502
- '.self-baseline': { 'align-self': 'baseline' },
1503
- })
1504
- },
1505
-
1506
- justifySelf: ({ addUtilities }) => {
1507
- addUtilities({
1508
- '.justify-self-auto': { 'justify-self': 'auto' },
1509
- '.justify-self-start': { 'justify-self': 'start' },
1510
- '.justify-self-end': { 'justify-self': 'end' },
1511
- '.justify-self-center': { 'justify-self': 'center' },
1512
- '.justify-self-stretch': { 'justify-self': 'stretch' },
1513
- })
1514
- },
1515
-
1516
- overflow: ({ addUtilities }) => {
1517
- addUtilities({
1518
- '.overflow-auto': { overflow: 'auto' },
1519
- '.overflow-hidden': { overflow: 'hidden' },
1520
- '.overflow-clip': { overflow: 'clip' },
1521
- '.overflow-visible': { overflow: 'visible' },
1522
- '.overflow-scroll': { overflow: 'scroll' },
1523
- '.overflow-x-auto': { 'overflow-x': 'auto' },
1524
- '.overflow-y-auto': { 'overflow-y': 'auto' },
1525
- '.overflow-x-hidden': { 'overflow-x': 'hidden' },
1526
- '.overflow-y-hidden': { 'overflow-y': 'hidden' },
1527
- '.overflow-x-clip': { 'overflow-x': 'clip' },
1528
- '.overflow-y-clip': { 'overflow-y': 'clip' },
1529
- '.overflow-x-visible': { 'overflow-x': 'visible' },
1530
- '.overflow-y-visible': { 'overflow-y': 'visible' },
1531
- '.overflow-x-scroll': { 'overflow-x': 'scroll' },
1532
- '.overflow-y-scroll': { 'overflow-y': 'scroll' },
1533
- })
1534
- },
1535
-
1536
- overscrollBehavior: ({ addUtilities }) => {
1537
- addUtilities({
1538
- '.overscroll-auto': { 'overscroll-behavior': 'auto' },
1539
- '.overscroll-contain': { 'overscroll-behavior': 'contain' },
1540
- '.overscroll-none': { 'overscroll-behavior': 'none' },
1541
- '.overscroll-y-auto': { 'overscroll-behavior-y': 'auto' },
1542
- '.overscroll-y-contain': { 'overscroll-behavior-y': 'contain' },
1543
- '.overscroll-y-none': { 'overscroll-behavior-y': 'none' },
1544
- '.overscroll-x-auto': { 'overscroll-behavior-x': 'auto' },
1545
- '.overscroll-x-contain': { 'overscroll-behavior-x': 'contain' },
1546
- '.overscroll-x-none': { 'overscroll-behavior-x': 'none' },
1547
- })
1548
- },
1549
-
1550
- scrollBehavior: ({ addUtilities }) => {
1551
- addUtilities({
1552
- '.scroll-auto': { 'scroll-behavior': 'auto' },
1553
- '.scroll-smooth': { 'scroll-behavior': 'smooth' },
1554
- })
1555
- },
1556
-
1557
- textOverflow: ({ addUtilities }) => {
1558
- addUtilities({
1559
- '.truncate': { overflow: 'hidden', 'text-overflow': 'ellipsis', 'white-space': 'nowrap' },
1560
- '.overflow-ellipsis': { 'text-overflow': 'ellipsis' }, // Deprecated
1561
- '.text-ellipsis': { 'text-overflow': 'ellipsis' },
1562
- '.text-clip': { 'text-overflow': 'clip' },
1563
- })
1564
- },
1565
-
1566
- hyphens: ({ addUtilities }) => {
1567
- addUtilities({
1568
- '.hyphens-none': { hyphens: 'none' },
1569
- '.hyphens-manual': { hyphens: 'manual' },
1570
- '.hyphens-auto': { hyphens: 'auto' },
1571
- })
1572
- },
1573
-
1574
- whitespace: ({ addUtilities }) => {
1575
- addUtilities({
1576
- '.whitespace-normal': { 'white-space': 'normal' },
1577
- '.whitespace-nowrap': { 'white-space': 'nowrap' },
1578
- '.whitespace-pre': { 'white-space': 'pre' },
1579
- '.whitespace-pre-line': { 'white-space': 'pre-line' },
1580
- '.whitespace-pre-wrap': { 'white-space': 'pre-wrap' },
1581
- '.whitespace-break-spaces': { 'white-space': 'break-spaces' },
1582
- })
1583
- },
1584
-
1585
- textWrap: ({ addUtilities }) => {
1586
- addUtilities({
1587
- '.text-wrap': { 'text-wrap': 'wrap' },
1588
- '.text-nowrap': { 'text-wrap': 'nowrap' },
1589
- '.text-balance': { 'text-wrap': 'balance' },
1590
- '.text-pretty': { 'text-wrap': 'pretty' },
1591
- })
1592
- },
1593
-
1594
- wordBreak: ({ addUtilities }) => {
1595
- addUtilities({
1596
- '.break-normal': { 'overflow-wrap': 'normal', 'word-break': 'normal' },
1597
- '.break-words': { 'overflow-wrap': 'break-word' },
1598
- '.break-all': { 'word-break': 'break-all' },
1599
- '.break-keep': { 'word-break': 'keep-all' },
1600
- })
1601
- },
1602
-
1603
- borderRadius: createUtilityPlugin('borderRadius', [
1604
- ['rounded', ['border-radius']],
1605
- [
1606
- ['rounded-s', ['border-start-start-radius', 'border-end-start-radius']],
1607
- ['rounded-e', ['border-start-end-radius', 'border-end-end-radius']],
1608
- ['rounded-t', ['border-top-left-radius', 'border-top-right-radius']],
1609
- ['rounded-r', ['border-top-right-radius', 'border-bottom-right-radius']],
1610
- ['rounded-b', ['border-bottom-right-radius', 'border-bottom-left-radius']],
1611
- ['rounded-l', ['border-top-left-radius', 'border-bottom-left-radius']],
1612
- ],
1613
- [
1614
- ['rounded-ss', ['border-start-start-radius']],
1615
- ['rounded-se', ['border-start-end-radius']],
1616
- ['rounded-ee', ['border-end-end-radius']],
1617
- ['rounded-es', ['border-end-start-radius']],
1618
- ['rounded-tl', ['border-top-left-radius']],
1619
- ['rounded-tr', ['border-top-right-radius']],
1620
- ['rounded-br', ['border-bottom-right-radius']],
1621
- ['rounded-bl', ['border-bottom-left-radius']],
1622
- ],
1623
- ]),
1624
-
1625
- borderWidth: createUtilityPlugin(
1626
- 'borderWidth',
1627
- [
1628
- ['border', [['@defaults border-width', {}], 'border-width']],
1629
- [
1630
- ['border-x', [['@defaults border-width', {}], 'border-left-width', 'border-right-width']],
1631
- ['border-y', [['@defaults border-width', {}], 'border-top-width', 'border-bottom-width']],
1632
- ],
1633
- [
1634
- ['border-s', [['@defaults border-width', {}], 'border-inline-start-width']],
1635
- ['border-e', [['@defaults border-width', {}], 'border-inline-end-width']],
1636
- ['border-t', [['@defaults border-width', {}], 'border-top-width']],
1637
- ['border-r', [['@defaults border-width', {}], 'border-right-width']],
1638
- ['border-b', [['@defaults border-width', {}], 'border-bottom-width']],
1639
- ['border-l', [['@defaults border-width', {}], 'border-left-width']],
1640
- ],
1641
- ],
1642
- { type: ['line-width', 'length'] }
1643
- ),
1644
-
1645
- borderStyle: ({ addUtilities }) => {
1646
- addUtilities({
1647
- '.border-solid': { 'border-style': 'solid' },
1648
- '.border-dashed': { 'border-style': 'dashed' },
1649
- '.border-dotted': { 'border-style': 'dotted' },
1650
- '.border-double': { 'border-style': 'double' },
1651
- '.border-hidden': { 'border-style': 'hidden' },
1652
- '.border-none': { 'border-style': 'none' },
1653
- })
1654
- },
1655
-
1656
- borderColor: ({ matchUtilities, theme, corePlugins }) => {
1657
- matchUtilities(
1658
- {
1659
- border: (value) => {
1660
- if (!corePlugins('borderOpacity')) {
1661
- return {
1662
- 'border-color': toColorValue(value),
1663
- }
1664
- }
1665
-
1666
- return withAlphaVariable({
1667
- color: value,
1668
- property: 'border-color',
1669
- variable: '--tw-border-opacity',
1670
- })
1671
- },
1672
- },
1673
- {
1674
- values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('borderColor'))),
1675
- type: ['color', 'any'],
1676
- }
1677
- )
1678
-
1679
- matchUtilities(
1680
- {
1681
- 'border-x': (value) => {
1682
- if (!corePlugins('borderOpacity')) {
1683
- return {
1684
- 'border-left-color': toColorValue(value),
1685
- 'border-right-color': toColorValue(value),
1686
- }
1687
- }
1688
-
1689
- return withAlphaVariable({
1690
- color: value,
1691
- property: ['border-left-color', 'border-right-color'],
1692
- variable: '--tw-border-opacity',
1693
- })
1694
- },
1695
- 'border-y': (value) => {
1696
- if (!corePlugins('borderOpacity')) {
1697
- return {
1698
- 'border-top-color': toColorValue(value),
1699
- 'border-bottom-color': toColorValue(value),
1700
- }
1701
- }
1702
-
1703
- return withAlphaVariable({
1704
- color: value,
1705
- property: ['border-top-color', 'border-bottom-color'],
1706
- variable: '--tw-border-opacity',
1707
- })
1708
- },
1709
- },
1710
- {
1711
- values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('borderColor'))),
1712
- type: ['color', 'any'],
1713
- }
1714
- )
1715
-
1716
- matchUtilities(
1717
- {
1718
- 'border-s': (value) => {
1719
- if (!corePlugins('borderOpacity')) {
1720
- return {
1721
- 'border-inline-start-color': toColorValue(value),
1722
- }
1723
- }
1724
-
1725
- return withAlphaVariable({
1726
- color: value,
1727
- property: 'border-inline-start-color',
1728
- variable: '--tw-border-opacity',
1729
- })
1730
- },
1731
- 'border-e': (value) => {
1732
- if (!corePlugins('borderOpacity')) {
1733
- return {
1734
- 'border-inline-end-color': toColorValue(value),
1735
- }
1736
- }
1737
-
1738
- return withAlphaVariable({
1739
- color: value,
1740
- property: 'border-inline-end-color',
1741
- variable: '--tw-border-opacity',
1742
- })
1743
- },
1744
- 'border-t': (value) => {
1745
- if (!corePlugins('borderOpacity')) {
1746
- return {
1747
- 'border-top-color': toColorValue(value),
1748
- }
1749
- }
1750
-
1751
- return withAlphaVariable({
1752
- color: value,
1753
- property: 'border-top-color',
1754
- variable: '--tw-border-opacity',
1755
- })
1756
- },
1757
- 'border-r': (value) => {
1758
- if (!corePlugins('borderOpacity')) {
1759
- return {
1760
- 'border-right-color': toColorValue(value),
1761
- }
1762
- }
1763
-
1764
- return withAlphaVariable({
1765
- color: value,
1766
- property: 'border-right-color',
1767
- variable: '--tw-border-opacity',
1768
- })
1769
- },
1770
- 'border-b': (value) => {
1771
- if (!corePlugins('borderOpacity')) {
1772
- return {
1773
- 'border-bottom-color': toColorValue(value),
1774
- }
1775
- }
1776
-
1777
- return withAlphaVariable({
1778
- color: value,
1779
- property: 'border-bottom-color',
1780
- variable: '--tw-border-opacity',
1781
- })
1782
- },
1783
- 'border-l': (value) => {
1784
- if (!corePlugins('borderOpacity')) {
1785
- return {
1786
- 'border-left-color': toColorValue(value),
1787
- }
1788
- }
1789
-
1790
- return withAlphaVariable({
1791
- color: value,
1792
- property: 'border-left-color',
1793
- variable: '--tw-border-opacity',
1794
- })
1795
- },
1796
- },
1797
- {
1798
- values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('borderColor'))),
1799
- type: ['color', 'any'],
1800
- }
1801
- )
1802
- },
1803
-
1804
- borderOpacity: createUtilityPlugin('borderOpacity', [
1805
- ['border-opacity', ['--tw-border-opacity']],
1806
- ]),
1807
-
1808
- backgroundColor: ({ matchUtilities, theme, corePlugins }) => {
1809
- matchUtilities(
1810
- {
1811
- bg: (value) => {
1812
- if (!corePlugins('backgroundOpacity')) {
1813
- return {
1814
- 'background-color': toColorValue(value),
1815
- }
1816
- }
1817
-
1818
- return withAlphaVariable({
1819
- color: value,
1820
- property: 'background-color',
1821
- variable: '--tw-bg-opacity',
1822
- })
1823
- },
1824
- },
1825
- { values: flattenColorPalette(theme('backgroundColor')), type: ['color', 'any'] }
1826
- )
1827
- },
1828
-
1829
- backgroundOpacity: createUtilityPlugin('backgroundOpacity', [
1830
- ['bg-opacity', ['--tw-bg-opacity']],
1831
- ]),
1832
- backgroundImage: createUtilityPlugin('backgroundImage', [['bg', ['background-image']]], {
1833
- type: ['lookup', 'image', 'url'],
1834
- }),
1835
- gradientColorStops: (() => {
1836
- function transparentTo(value) {
1837
- return withAlphaValue(value, 0, 'rgb(255 255 255 / 0)')
1838
- }
1839
-
1840
- return function ({ matchUtilities, theme, addDefaults }) {
1841
- addDefaults('gradient-color-stops', {
1842
- '--tw-gradient-from-position': ' ',
1843
- '--tw-gradient-via-position': ' ',
1844
- '--tw-gradient-to-position': ' ',
1845
- })
1846
-
1847
- let options = {
1848
- values: flattenColorPalette(theme('gradientColorStops')),
1849
- type: ['color', 'any'],
1850
- }
1851
-
1852
- let positionOptions = {
1853
- values: theme('gradientColorStopPositions'),
1854
- type: ['length', 'percentage'],
1855
- }
1856
-
1857
- matchUtilities(
1858
- {
1859
- from: (value) => {
1860
- let transparentToValue = transparentTo(value)
1861
-
1862
- return {
1863
- '@defaults gradient-color-stops': {},
1864
- '--tw-gradient-from': `${toColorValue(value)} var(--tw-gradient-from-position)`,
1865
- '--tw-gradient-to': `${transparentToValue} var(--tw-gradient-to-position)`,
1866
- '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to)`,
1867
- }
1868
- },
1869
- },
1870
- options
1871
- )
1872
-
1873
- matchUtilities(
1874
- {
1875
- from: (value) => {
1876
- return {
1877
- '--tw-gradient-from-position': value,
1878
- }
1879
- },
1880
- },
1881
- positionOptions
1882
- )
1883
-
1884
- matchUtilities(
1885
- {
1886
- via: (value) => {
1887
- let transparentToValue = transparentTo(value)
1888
-
1889
- return {
1890
- '@defaults gradient-color-stops': {},
1891
- '--tw-gradient-to': `${transparentToValue} var(--tw-gradient-to-position)`,
1892
- '--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
1893
- value
1894
- )} var(--tw-gradient-via-position), var(--tw-gradient-to)`,
1895
- }
1896
- },
1897
- },
1898
- options
1899
- )
1900
-
1901
- matchUtilities(
1902
- {
1903
- via: (value) => {
1904
- return {
1905
- '--tw-gradient-via-position': value,
1906
- }
1907
- },
1908
- },
1909
- positionOptions
1910
- )
1911
-
1912
- matchUtilities(
1913
- {
1914
- to: (value) => ({
1915
- '@defaults gradient-color-stops': {},
1916
- '--tw-gradient-to': `${toColorValue(value)} var(--tw-gradient-to-position)`,
1917
- }),
1918
- },
1919
- options
1920
- )
1921
-
1922
- matchUtilities(
1923
- {
1924
- to: (value) => {
1925
- return {
1926
- '--tw-gradient-to-position': value,
1927
- }
1928
- },
1929
- },
1930
- positionOptions
1931
- )
1932
- }
1933
- })(),
1934
-
1935
- boxDecorationBreak: ({ addUtilities }) => {
1936
- addUtilities({
1937
- '.decoration-slice': { 'box-decoration-break': 'slice' }, // Deprecated
1938
- '.decoration-clone': { 'box-decoration-break': 'clone' }, // Deprecated
1939
- '.box-decoration-slice': { 'box-decoration-break': 'slice' },
1940
- '.box-decoration-clone': { 'box-decoration-break': 'clone' },
1941
- })
1942
- },
1943
-
1944
- backgroundSize: createUtilityPlugin('backgroundSize', [['bg', ['background-size']]], {
1945
- type: ['lookup', 'length', 'percentage', 'size'],
1946
- }),
1947
-
1948
- backgroundAttachment: ({ addUtilities }) => {
1949
- addUtilities({
1950
- '.bg-fixed': { 'background-attachment': 'fixed' },
1951
- '.bg-local': { 'background-attachment': 'local' },
1952
- '.bg-scroll': { 'background-attachment': 'scroll' },
1953
- })
1954
- },
1955
-
1956
- backgroundClip: ({ addUtilities }) => {
1957
- addUtilities({
1958
- '.bg-clip-border': { 'background-clip': 'border-box' },
1959
- '.bg-clip-padding': { 'background-clip': 'padding-box' },
1960
- '.bg-clip-content': { 'background-clip': 'content-box' },
1961
- '.bg-clip-text': { 'background-clip': 'text' },
1962
- })
1963
- },
1964
-
1965
- backgroundPosition: createUtilityPlugin('backgroundPosition', [['bg', ['background-position']]], {
1966
- type: ['lookup', ['position', { preferOnConflict: true }]],
1967
- }),
1968
-
1969
- backgroundRepeat: ({ addUtilities }) => {
1970
- addUtilities({
1971
- '.bg-repeat': { 'background-repeat': 'repeat' },
1972
- '.bg-no-repeat': { 'background-repeat': 'no-repeat' },
1973
- '.bg-repeat-x': { 'background-repeat': 'repeat-x' },
1974
- '.bg-repeat-y': { 'background-repeat': 'repeat-y' },
1975
- '.bg-repeat-round': { 'background-repeat': 'round' },
1976
- '.bg-repeat-space': { 'background-repeat': 'space' },
1977
- })
1978
- },
1979
-
1980
- backgroundOrigin: ({ addUtilities }) => {
1981
- addUtilities({
1982
- '.bg-origin-border': { 'background-origin': 'border-box' },
1983
- '.bg-origin-padding': { 'background-origin': 'padding-box' },
1984
- '.bg-origin-content': { 'background-origin': 'content-box' },
1985
- })
1986
- },
1987
-
1988
- fill: ({ matchUtilities, theme }) => {
1989
- matchUtilities(
1990
- {
1991
- fill: (value) => {
1992
- return { fill: toColorValue(value) }
1993
- },
1994
- },
1995
- { values: flattenColorPalette(theme('fill')), type: ['color', 'any'] }
1996
- )
1997
- },
1998
-
1999
- stroke: ({ matchUtilities, theme }) => {
2000
- matchUtilities(
2001
- {
2002
- stroke: (value) => {
2003
- return { stroke: toColorValue(value) }
2004
- },
2005
- },
2006
- { values: flattenColorPalette(theme('stroke')), type: ['color', 'url', 'any'] }
2007
- )
2008
- },
2009
-
2010
- strokeWidth: createUtilityPlugin('strokeWidth', [['stroke', ['stroke-width']]], {
2011
- type: ['length', 'number', 'percentage'],
2012
- }),
2013
-
2014
- objectFit: ({ addUtilities }) => {
2015
- addUtilities({
2016
- '.object-contain': { 'object-fit': 'contain' },
2017
- '.object-cover': { 'object-fit': 'cover' },
2018
- '.object-fill': { 'object-fit': 'fill' },
2019
- '.object-none': { 'object-fit': 'none' },
2020
- '.object-scale-down': { 'object-fit': 'scale-down' },
2021
- })
2022
- },
2023
- objectPosition: createUtilityPlugin('objectPosition', [['object', ['object-position']]]),
2024
-
2025
- padding: createUtilityPlugin('padding', [
2026
- ['p', ['padding']],
2027
- [
2028
- ['px', ['padding-left', 'padding-right']],
2029
- ['py', ['padding-top', 'padding-bottom']],
2030
- ],
2031
- [
2032
- ['ps', ['padding-inline-start']],
2033
- ['pe', ['padding-inline-end']],
2034
- ['pt', ['padding-top']],
2035
- ['pr', ['padding-right']],
2036
- ['pb', ['padding-bottom']],
2037
- ['pl', ['padding-left']],
2038
- ],
2039
- ]),
2040
-
2041
- textAlign: ({ addUtilities }) => {
2042
- addUtilities({
2043
- '.text-left': { 'text-align': 'left' },
2044
- '.text-center': { 'text-align': 'center' },
2045
- '.text-right': { 'text-align': 'right' },
2046
- '.text-justify': { 'text-align': 'justify' },
2047
- '.text-start': { 'text-align': 'start' },
2048
- '.text-end': { 'text-align': 'end' },
2049
- })
2050
- },
2051
-
2052
- textIndent: createUtilityPlugin('textIndent', [['indent', ['text-indent']]], {
2053
- supportsNegativeValues: true,
2054
- }),
2055
-
2056
- verticalAlign: ({ addUtilities, matchUtilities }) => {
2057
- addUtilities({
2058
- '.align-baseline': { 'vertical-align': 'baseline' },
2059
- '.align-top': { 'vertical-align': 'top' },
2060
- '.align-middle': { 'vertical-align': 'middle' },
2061
- '.align-bottom': { 'vertical-align': 'bottom' },
2062
- '.align-text-top': { 'vertical-align': 'text-top' },
2063
- '.align-text-bottom': { 'vertical-align': 'text-bottom' },
2064
- '.align-sub': { 'vertical-align': 'sub' },
2065
- '.align-super': { 'vertical-align': 'super' },
2066
- })
2067
-
2068
- matchUtilities({ align: (value) => ({ 'vertical-align': value }) })
2069
- },
2070
-
2071
- fontFamily: ({ matchUtilities, theme }) => {
2072
- matchUtilities(
2073
- {
2074
- font: (value) => {
2075
- let [families, options = {}] =
2076
- Array.isArray(value) && isPlainObject(value[1]) ? value : [value]
2077
- let { fontFeatureSettings, fontVariationSettings } = options
2078
-
2079
- return {
2080
- 'font-family': Array.isArray(families) ? families.join(', ') : families,
2081
- ...(fontFeatureSettings === undefined
2082
- ? {}
2083
- : { 'font-feature-settings': fontFeatureSettings }),
2084
- ...(fontVariationSettings === undefined
2085
- ? {}
2086
- : { 'font-variation-settings': fontVariationSettings }),
2087
- }
2088
- },
2089
- },
2090
- {
2091
- values: theme('fontFamily'),
2092
- type: ['lookup', 'generic-name', 'family-name'],
2093
- }
2094
- )
2095
- },
2096
-
2097
- fontSize: ({ matchUtilities, theme }) => {
2098
- matchUtilities(
2099
- {
2100
- text: (value, { modifier }) => {
2101
- let [fontSize, options] = Array.isArray(value) ? value : [value]
2102
-
2103
- if (modifier) {
2104
- return {
2105
- 'font-size': fontSize,
2106
- 'line-height': modifier,
2107
- }
2108
- }
2109
-
2110
- let { lineHeight, letterSpacing, fontWeight } = isPlainObject(options)
2111
- ? options
2112
- : { lineHeight: options }
2113
-
2114
- return {
2115
- 'font-size': fontSize,
2116
- ...(lineHeight === undefined ? {} : { 'line-height': lineHeight }),
2117
- ...(letterSpacing === undefined ? {} : { 'letter-spacing': letterSpacing }),
2118
- ...(fontWeight === undefined ? {} : { 'font-weight': fontWeight }),
2119
- }
2120
- },
2121
- },
2122
- {
2123
- values: theme('fontSize'),
2124
- modifiers: theme('lineHeight'),
2125
- type: ['absolute-size', 'relative-size', 'length', 'percentage'],
2126
- }
2127
- )
2128
- },
2129
-
2130
- fontWeight: createUtilityPlugin('fontWeight', [['font', ['fontWeight']]], {
2131
- type: ['lookup', 'number', 'any'],
2132
- }),
2133
-
2134
- textTransform: ({ addUtilities }) => {
2135
- addUtilities({
2136
- '.uppercase': { 'text-transform': 'uppercase' },
2137
- '.lowercase': { 'text-transform': 'lowercase' },
2138
- '.capitalize': { 'text-transform': 'capitalize' },
2139
- '.normal-case': { 'text-transform': 'none' },
2140
- })
2141
- },
2142
-
2143
- fontStyle: ({ addUtilities }) => {
2144
- addUtilities({
2145
- '.italic': { 'font-style': 'italic' },
2146
- '.not-italic': { 'font-style': 'normal' },
2147
- })
2148
- },
2149
-
2150
- fontVariantNumeric: ({ addDefaults, addUtilities }) => {
2151
- let cssFontVariantNumericValue =
2152
- 'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)'
2153
-
2154
- addDefaults('font-variant-numeric', {
2155
- '--tw-ordinal': ' ',
2156
- '--tw-slashed-zero': ' ',
2157
- '--tw-numeric-figure': ' ',
2158
- '--tw-numeric-spacing': ' ',
2159
- '--tw-numeric-fraction': ' ',
2160
- })
2161
-
2162
- addUtilities({
2163
- '.normal-nums': { 'font-variant-numeric': 'normal' },
2164
- '.ordinal': {
2165
- '@defaults font-variant-numeric': {},
2166
- '--tw-ordinal': 'ordinal',
2167
- 'font-variant-numeric': cssFontVariantNumericValue,
2168
- },
2169
- '.slashed-zero': {
2170
- '@defaults font-variant-numeric': {},
2171
- '--tw-slashed-zero': 'slashed-zero',
2172
- 'font-variant-numeric': cssFontVariantNumericValue,
2173
- },
2174
- '.lining-nums': {
2175
- '@defaults font-variant-numeric': {},
2176
- '--tw-numeric-figure': 'lining-nums',
2177
- 'font-variant-numeric': cssFontVariantNumericValue,
2178
- },
2179
- '.oldstyle-nums': {
2180
- '@defaults font-variant-numeric': {},
2181
- '--tw-numeric-figure': 'oldstyle-nums',
2182
- 'font-variant-numeric': cssFontVariantNumericValue,
2183
- },
2184
- '.proportional-nums': {
2185
- '@defaults font-variant-numeric': {},
2186
- '--tw-numeric-spacing': 'proportional-nums',
2187
- 'font-variant-numeric': cssFontVariantNumericValue,
2188
- },
2189
- '.tabular-nums': {
2190
- '@defaults font-variant-numeric': {},
2191
- '--tw-numeric-spacing': 'tabular-nums',
2192
- 'font-variant-numeric': cssFontVariantNumericValue,
2193
- },
2194
- '.diagonal-fractions': {
2195
- '@defaults font-variant-numeric': {},
2196
- '--tw-numeric-fraction': 'diagonal-fractions',
2197
- 'font-variant-numeric': cssFontVariantNumericValue,
2198
- },
2199
- '.stacked-fractions': {
2200
- '@defaults font-variant-numeric': {},
2201
- '--tw-numeric-fraction': 'stacked-fractions',
2202
- 'font-variant-numeric': cssFontVariantNumericValue,
2203
- },
2204
- })
2205
- },
2206
-
2207
- lineHeight: createUtilityPlugin('lineHeight', [['leading', ['lineHeight']]]),
2208
- letterSpacing: createUtilityPlugin('letterSpacing', [['tracking', ['letterSpacing']]], {
2209
- supportsNegativeValues: true,
2210
- }),
2211
-
2212
- textColor: ({ matchUtilities, theme, corePlugins }) => {
2213
- matchUtilities(
2214
- {
2215
- text: (value) => {
2216
- if (!corePlugins('textOpacity')) {
2217
- return { color: toColorValue(value) }
2218
- }
2219
-
2220
- return withAlphaVariable({
2221
- color: value,
2222
- property: 'color',
2223
- variable: '--tw-text-opacity',
2224
- })
2225
- },
2226
- },
2227
- { values: flattenColorPalette(theme('textColor')), type: ['color', 'any'] }
2228
- )
2229
- },
2230
-
2231
- textOpacity: createUtilityPlugin('textOpacity', [['text-opacity', ['--tw-text-opacity']]]),
2232
-
2233
- textDecoration: ({ addUtilities }) => {
2234
- addUtilities({
2235
- '.underline': { 'text-decoration-line': 'underline' },
2236
- '.overline': { 'text-decoration-line': 'overline' },
2237
- '.line-through': { 'text-decoration-line': 'line-through' },
2238
- '.no-underline': { 'text-decoration-line': 'none' },
2239
- })
2240
- },
2241
-
2242
- textDecorationColor: ({ matchUtilities, theme }) => {
2243
- matchUtilities(
2244
- {
2245
- decoration: (value) => {
2246
- return { 'text-decoration-color': toColorValue(value) }
2247
- },
2248
- },
2249
- { values: flattenColorPalette(theme('textDecorationColor')), type: ['color', 'any'] }
2250
- )
2251
- },
2252
-
2253
- textDecorationStyle: ({ addUtilities }) => {
2254
- addUtilities({
2255
- '.decoration-solid': { 'text-decoration-style': 'solid' },
2256
- '.decoration-double': { 'text-decoration-style': 'double' },
2257
- '.decoration-dotted': { 'text-decoration-style': 'dotted' },
2258
- '.decoration-dashed': { 'text-decoration-style': 'dashed' },
2259
- '.decoration-wavy': { 'text-decoration-style': 'wavy' },
2260
- })
2261
- },
2262
-
2263
- textDecorationThickness: createUtilityPlugin(
2264
- 'textDecorationThickness',
2265
- [['decoration', ['text-decoration-thickness']]],
2266
- { type: ['length', 'percentage'] }
2267
- ),
2268
-
2269
- textUnderlineOffset: createUtilityPlugin(
2270
- 'textUnderlineOffset',
2271
- [['underline-offset', ['text-underline-offset']]],
2272
- { type: ['length', 'percentage', 'any'] }
2273
- ),
2274
-
2275
- fontSmoothing: ({ addUtilities }) => {
2276
- addUtilities({
2277
- '.antialiased': {
2278
- '-webkit-font-smoothing': 'antialiased',
2279
- '-moz-osx-font-smoothing': 'grayscale',
2280
- },
2281
- '.subpixel-antialiased': {
2282
- '-webkit-font-smoothing': 'auto',
2283
- '-moz-osx-font-smoothing': 'auto',
2284
- },
2285
- })
2286
- },
2287
-
2288
- placeholderColor: ({ matchUtilities, theme, corePlugins }) => {
2289
- matchUtilities(
2290
- {
2291
- placeholder: (value) => {
2292
- if (!corePlugins('placeholderOpacity')) {
2293
- return {
2294
- '&::placeholder': {
2295
- color: toColorValue(value),
2296
- },
2297
- }
2298
- }
2299
-
2300
- return {
2301
- '&::placeholder': withAlphaVariable({
2302
- color: value,
2303
- property: 'color',
2304
- variable: '--tw-placeholder-opacity',
2305
- }),
2306
- }
2307
- },
2308
- },
2309
- { values: flattenColorPalette(theme('placeholderColor')), type: ['color', 'any'] }
2310
- )
2311
- },
2312
-
2313
- placeholderOpacity: ({ matchUtilities, theme }) => {
2314
- matchUtilities(
2315
- {
2316
- 'placeholder-opacity': (value) => {
2317
- return { ['&::placeholder']: { '--tw-placeholder-opacity': value } }
2318
- },
2319
- },
2320
- { values: theme('placeholderOpacity') }
2321
- )
2322
- },
2323
-
2324
- caretColor: ({ matchUtilities, theme }) => {
2325
- matchUtilities(
2326
- {
2327
- caret: (value) => {
2328
- return { 'caret-color': toColorValue(value) }
2329
- },
2330
- },
2331
- { values: flattenColorPalette(theme('caretColor')), type: ['color', 'any'] }
2332
- )
2333
- },
2334
-
2335
- accentColor: ({ matchUtilities, theme }) => {
2336
- matchUtilities(
2337
- {
2338
- accent: (value) => {
2339
- return { 'accent-color': toColorValue(value) }
2340
- },
2341
- },
2342
- { values: flattenColorPalette(theme('accentColor')), type: ['color', 'any'] }
2343
- )
2344
- },
2345
-
2346
- opacity: createUtilityPlugin('opacity', [['opacity', ['opacity']]]),
2347
-
2348
- backgroundBlendMode: ({ addUtilities }) => {
2349
- addUtilities({
2350
- '.bg-blend-normal': { 'background-blend-mode': 'normal' },
2351
- '.bg-blend-multiply': { 'background-blend-mode': 'multiply' },
2352
- '.bg-blend-screen': { 'background-blend-mode': 'screen' },
2353
- '.bg-blend-overlay': { 'background-blend-mode': 'overlay' },
2354
- '.bg-blend-darken': { 'background-blend-mode': 'darken' },
2355
- '.bg-blend-lighten': { 'background-blend-mode': 'lighten' },
2356
- '.bg-blend-color-dodge': { 'background-blend-mode': 'color-dodge' },
2357
- '.bg-blend-color-burn': { 'background-blend-mode': 'color-burn' },
2358
- '.bg-blend-hard-light': { 'background-blend-mode': 'hard-light' },
2359
- '.bg-blend-soft-light': { 'background-blend-mode': 'soft-light' },
2360
- '.bg-blend-difference': { 'background-blend-mode': 'difference' },
2361
- '.bg-blend-exclusion': { 'background-blend-mode': 'exclusion' },
2362
- '.bg-blend-hue': { 'background-blend-mode': 'hue' },
2363
- '.bg-blend-saturation': { 'background-blend-mode': 'saturation' },
2364
- '.bg-blend-color': { 'background-blend-mode': 'color' },
2365
- '.bg-blend-luminosity': { 'background-blend-mode': 'luminosity' },
2366
- })
2367
- },
2368
-
2369
- mixBlendMode: ({ addUtilities }) => {
2370
- addUtilities({
2371
- '.mix-blend-normal': { 'mix-blend-mode': 'normal' },
2372
- '.mix-blend-multiply': { 'mix-blend-mode': 'multiply' },
2373
- '.mix-blend-screen': { 'mix-blend-mode': 'screen' },
2374
- '.mix-blend-overlay': { 'mix-blend-mode': 'overlay' },
2375
- '.mix-blend-darken': { 'mix-blend-mode': 'darken' },
2376
- '.mix-blend-lighten': { 'mix-blend-mode': 'lighten' },
2377
- '.mix-blend-color-dodge': { 'mix-blend-mode': 'color-dodge' },
2378
- '.mix-blend-color-burn': { 'mix-blend-mode': 'color-burn' },
2379
- '.mix-blend-hard-light': { 'mix-blend-mode': 'hard-light' },
2380
- '.mix-blend-soft-light': { 'mix-blend-mode': 'soft-light' },
2381
- '.mix-blend-difference': { 'mix-blend-mode': 'difference' },
2382
- '.mix-blend-exclusion': { 'mix-blend-mode': 'exclusion' },
2383
- '.mix-blend-hue': { 'mix-blend-mode': 'hue' },
2384
- '.mix-blend-saturation': { 'mix-blend-mode': 'saturation' },
2385
- '.mix-blend-color': { 'mix-blend-mode': 'color' },
2386
- '.mix-blend-luminosity': { 'mix-blend-mode': 'luminosity' },
2387
- '.mix-blend-plus-lighter': { 'mix-blend-mode': 'plus-lighter' },
2388
- })
2389
- },
2390
-
2391
- boxShadow: (() => {
2392
- let transformValue = transformThemeValue('boxShadow')
2393
- let defaultBoxShadow = [
2394
- `var(--tw-ring-offset-shadow, 0 0 #0000)`,
2395
- `var(--tw-ring-shadow, 0 0 #0000)`,
2396
- `var(--tw-shadow)`,
2397
- ].join(', ')
2398
-
2399
- return function ({ matchUtilities, addDefaults, theme }) {
2400
- addDefaults(' box-shadow', {
2401
- '--tw-ring-offset-shadow': '0 0 #0000',
2402
- '--tw-ring-shadow': '0 0 #0000',
2403
- '--tw-shadow': '0 0 #0000',
2404
- '--tw-shadow-colored': '0 0 #0000',
2405
- })
2406
-
2407
- matchUtilities(
2408
- {
2409
- shadow: (value) => {
2410
- value = transformValue(value)
2411
-
2412
- let ast = parseBoxShadowValue(value)
2413
- for (let shadow of ast) {
2414
- // Don't override color if the whole shadow is a variable
2415
- if (!shadow.valid) {
2416
- continue
2417
- }
2418
-
2419
- shadow.color = 'var(--tw-shadow-color)'
2420
- }
2421
-
2422
- return {
2423
- '@defaults box-shadow': {},
2424
- '--tw-shadow': value === 'none' ? '0 0 #0000' : value,
2425
- '--tw-shadow-colored': value === 'none' ? '0 0 #0000' : formatBoxShadowValue(ast),
2426
- 'box-shadow': defaultBoxShadow,
2427
- }
2428
- },
2429
- },
2430
- { values: theme('boxShadow'), type: ['shadow'] }
2431
- )
2432
- }
2433
- })(),
2434
-
2435
- boxShadowColor: ({ matchUtilities, theme }) => {
2436
- matchUtilities(
2437
- {
2438
- shadow: (value) => {
2439
- return {
2440
- '--tw-shadow-color': toColorValue(value),
2441
- '--tw-shadow': 'var(--tw-shadow-colored)',
2442
- }
2443
- },
2444
- },
2445
- { values: flattenColorPalette(theme('boxShadowColor')), type: ['color', 'any'] }
2446
- )
2447
- },
2448
-
2449
- outlineStyle: ({ addUtilities }) => {
2450
- addUtilities({
2451
- '.outline-none': {
2452
- outline: '2px solid transparent',
2453
- 'outline-offset': '2px',
2454
- },
2455
- '.outline': { 'outline-style': 'solid' },
2456
- '.outline-dashed': { 'outline-style': 'dashed' },
2457
- '.outline-dotted': { 'outline-style': 'dotted' },
2458
- '.outline-double': { 'outline-style': 'double' },
2459
- })
2460
- },
2461
-
2462
- outlineWidth: createUtilityPlugin('outlineWidth', [['outline', ['outline-width']]], {
2463
- type: ['length', 'number', 'percentage'],
2464
- }),
2465
-
2466
- outlineOffset: createUtilityPlugin('outlineOffset', [['outline-offset', ['outline-offset']]], {
2467
- type: ['length', 'number', 'percentage', 'any'],
2468
- supportsNegativeValues: true,
2469
- }),
2470
-
2471
- outlineColor: ({ matchUtilities, theme }) => {
2472
- matchUtilities(
2473
- {
2474
- outline: (value) => {
2475
- return { 'outline-color': toColorValue(value) }
2476
- },
2477
- },
2478
- { values: flattenColorPalette(theme('outlineColor')), type: ['color', 'any'] }
2479
- )
2480
- },
2481
-
2482
- ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme, config }) => {
2483
- let ringColorDefault = (() => {
2484
- if (flagEnabled(config(), 'respectDefaultRingColorOpacity')) {
2485
- return theme('ringColor.DEFAULT')
2486
- }
2487
-
2488
- let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
2489
-
2490
- if (!theme('ringColor')?.DEFAULT) {
2491
- return `rgb(147 197 253 / ${ringOpacityDefault})`
2492
- }
2493
-
2494
- return withAlphaValue(
2495
- theme('ringColor')?.DEFAULT,
2496
- ringOpacityDefault,
2497
- `rgb(147 197 253 / ${ringOpacityDefault})`
2498
- )
2499
- })()
2500
-
2501
- addDefaults('ring-width', {
2502
- '--tw-ring-inset': ' ',
2503
- '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
2504
- '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
2505
- '--tw-ring-color': ringColorDefault,
2506
- '--tw-ring-offset-shadow': '0 0 #0000',
2507
- '--tw-ring-shadow': '0 0 #0000',
2508
- '--tw-shadow': '0 0 #0000',
2509
- '--tw-shadow-colored': '0 0 #0000',
2510
- })
2511
-
2512
- matchUtilities(
2513
- {
2514
- ring: (value) => {
2515
- return {
2516
- '@defaults ring-width': {},
2517
- '--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
2518
- '--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
2519
- 'box-shadow': [
2520
- `var(--tw-ring-offset-shadow)`,
2521
- `var(--tw-ring-shadow)`,
2522
- `var(--tw-shadow, 0 0 #0000)`,
2523
- ].join(', '),
2524
- }
2525
- },
2526
- },
2527
- { values: theme('ringWidth'), type: 'length' }
2528
- )
2529
-
2530
- addUtilities({
2531
- '.ring-inset': { '@defaults ring-width': {}, '--tw-ring-inset': 'inset' },
2532
- })
2533
- },
2534
-
2535
- ringColor: ({ matchUtilities, theme, corePlugins }) => {
2536
- matchUtilities(
2537
- {
2538
- ring: (value) => {
2539
- if (!corePlugins('ringOpacity')) {
2540
- return {
2541
- '--tw-ring-color': toColorValue(value),
2542
- }
2543
- }
2544
-
2545
- return withAlphaVariable({
2546
- color: value,
2547
- property: '--tw-ring-color',
2548
- variable: '--tw-ring-opacity',
2549
- })
2550
- },
2551
- },
2552
- {
2553
- values: Object.fromEntries(
2554
- Object.entries(flattenColorPalette(theme('ringColor'))).filter(
2555
- ([modifier]) => modifier !== 'DEFAULT'
2556
- )
2557
- ),
2558
- type: ['color', 'any'],
2559
- }
2560
- )
2561
- },
2562
-
2563
- ringOpacity: (helpers) => {
2564
- let { config } = helpers
2565
-
2566
- return createUtilityPlugin('ringOpacity', [['ring-opacity', ['--tw-ring-opacity']]], {
2567
- filterDefault: !flagEnabled(config(), 'respectDefaultRingColorOpacity'),
2568
- })(helpers)
2569
- },
2570
- ringOffsetWidth: createUtilityPlugin(
2571
- 'ringOffsetWidth',
2572
- [['ring-offset', ['--tw-ring-offset-width']]],
2573
- { type: 'length' }
2574
- ),
2575
-
2576
- ringOffsetColor: ({ matchUtilities, theme }) => {
2577
- matchUtilities(
2578
- {
2579
- 'ring-offset': (value) => {
2580
- return {
2581
- '--tw-ring-offset-color': toColorValue(value),
2582
- }
2583
- },
2584
- },
2585
- { values: flattenColorPalette(theme('ringOffsetColor')), type: ['color', 'any'] }
2586
- )
2587
- },
2588
-
2589
- blur: ({ matchUtilities, theme }) => {
2590
- matchUtilities(
2591
- {
2592
- blur: (value) => {
2593
- return {
2594
- '--tw-blur': `blur(${value})`,
2595
- '@defaults filter': {},
2596
- filter: cssFilterValue,
2597
- }
2598
- },
2599
- },
2600
- { values: theme('blur') }
2601
- )
2602
- },
2603
-
2604
- brightness: ({ matchUtilities, theme }) => {
2605
- matchUtilities(
2606
- {
2607
- brightness: (value) => {
2608
- return {
2609
- '--tw-brightness': `brightness(${value})`,
2610
- '@defaults filter': {},
2611
- filter: cssFilterValue,
2612
- }
2613
- },
2614
- },
2615
- { values: theme('brightness') }
2616
- )
2617
- },
2618
-
2619
- contrast: ({ matchUtilities, theme }) => {
2620
- matchUtilities(
2621
- {
2622
- contrast: (value) => {
2623
- return {
2624
- '--tw-contrast': `contrast(${value})`,
2625
- '@defaults filter': {},
2626
- filter: cssFilterValue,
2627
- }
2628
- },
2629
- },
2630
- { values: theme('contrast') }
2631
- )
2632
- },
2633
-
2634
- dropShadow: ({ matchUtilities, theme }) => {
2635
- matchUtilities(
2636
- {
2637
- 'drop-shadow': (value) => {
2638
- return {
2639
- '--tw-drop-shadow': Array.isArray(value)
2640
- ? value.map((v) => `drop-shadow(${v})`).join(' ')
2641
- : `drop-shadow(${value})`,
2642
- '@defaults filter': {},
2643
- filter: cssFilterValue,
2644
- }
2645
- },
2646
- },
2647
- { values: theme('dropShadow') }
2648
- )
2649
- },
2650
-
2651
- grayscale: ({ matchUtilities, theme }) => {
2652
- matchUtilities(
2653
- {
2654
- grayscale: (value) => {
2655
- return {
2656
- '--tw-grayscale': `grayscale(${value})`,
2657
- '@defaults filter': {},
2658
- filter: cssFilterValue,
2659
- }
2660
- },
2661
- },
2662
- { values: theme('grayscale') }
2663
- )
2664
- },
2665
-
2666
- hueRotate: ({ matchUtilities, theme }) => {
2667
- matchUtilities(
2668
- {
2669
- 'hue-rotate': (value) => {
2670
- return {
2671
- '--tw-hue-rotate': `hue-rotate(${value})`,
2672
- '@defaults filter': {},
2673
- filter: cssFilterValue,
2674
- }
2675
- },
2676
- },
2677
- { values: theme('hueRotate'), supportsNegativeValues: true }
2678
- )
2679
- },
2680
-
2681
- invert: ({ matchUtilities, theme }) => {
2682
- matchUtilities(
2683
- {
2684
- invert: (value) => {
2685
- return {
2686
- '--tw-invert': `invert(${value})`,
2687
- '@defaults filter': {},
2688
- filter: cssFilterValue,
2689
- }
2690
- },
2691
- },
2692
- { values: theme('invert') }
2693
- )
2694
- },
2695
-
2696
- saturate: ({ matchUtilities, theme }) => {
2697
- matchUtilities(
2698
- {
2699
- saturate: (value) => {
2700
- return {
2701
- '--tw-saturate': `saturate(${value})`,
2702
- '@defaults filter': {},
2703
- filter: cssFilterValue,
2704
- }
2705
- },
2706
- },
2707
- { values: theme('saturate') }
2708
- )
2709
- },
2710
-
2711
- sepia: ({ matchUtilities, theme }) => {
2712
- matchUtilities(
2713
- {
2714
- sepia: (value) => {
2715
- return {
2716
- '--tw-sepia': `sepia(${value})`,
2717
- '@defaults filter': {},
2718
- filter: cssFilterValue,
2719
- }
2720
- },
2721
- },
2722
- { values: theme('sepia') }
2723
- )
2724
- },
2725
-
2726
- filter: ({ addDefaults, addUtilities }) => {
2727
- addDefaults('filter', {
2728
- '--tw-blur': ' ',
2729
- '--tw-brightness': ' ',
2730
- '--tw-contrast': ' ',
2731
- '--tw-grayscale': ' ',
2732
- '--tw-hue-rotate': ' ',
2733
- '--tw-invert': ' ',
2734
- '--tw-saturate': ' ',
2735
- '--tw-sepia': ' ',
2736
- '--tw-drop-shadow': ' ',
2737
- })
2738
- addUtilities({
2739
- '.filter': { '@defaults filter': {}, filter: cssFilterValue },
2740
- '.filter-none': { filter: 'none' },
2741
- })
2742
- },
2743
-
2744
- backdropBlur: ({ matchUtilities, theme }) => {
2745
- matchUtilities(
2746
- {
2747
- 'backdrop-blur': (value) => {
2748
- return {
2749
- '--tw-backdrop-blur': `blur(${value})`,
2750
- '@defaults backdrop-filter': {},
2751
- 'backdrop-filter': cssBackdropFilterValue,
2752
- }
2753
- },
2754
- },
2755
- { values: theme('backdropBlur') }
2756
- )
2757
- },
2758
-
2759
- backdropBrightness: ({ matchUtilities, theme }) => {
2760
- matchUtilities(
2761
- {
2762
- 'backdrop-brightness': (value) => {
2763
- return {
2764
- '--tw-backdrop-brightness': `brightness(${value})`,
2765
- '@defaults backdrop-filter': {},
2766
- 'backdrop-filter': cssBackdropFilterValue,
2767
- }
2768
- },
2769
- },
2770
- { values: theme('backdropBrightness') }
2771
- )
2772
- },
2773
-
2774
- backdropContrast: ({ matchUtilities, theme }) => {
2775
- matchUtilities(
2776
- {
2777
- 'backdrop-contrast': (value) => {
2778
- return {
2779
- '--tw-backdrop-contrast': `contrast(${value})`,
2780
- '@defaults backdrop-filter': {},
2781
- 'backdrop-filter': cssBackdropFilterValue,
2782
- }
2783
- },
2784
- },
2785
- { values: theme('backdropContrast') }
2786
- )
2787
- },
2788
-
2789
- backdropGrayscale: ({ matchUtilities, theme }) => {
2790
- matchUtilities(
2791
- {
2792
- 'backdrop-grayscale': (value) => {
2793
- return {
2794
- '--tw-backdrop-grayscale': `grayscale(${value})`,
2795
- '@defaults backdrop-filter': {},
2796
- 'backdrop-filter': cssBackdropFilterValue,
2797
- }
2798
- },
2799
- },
2800
- { values: theme('backdropGrayscale') }
2801
- )
2802
- },
2803
-
2804
- backdropHueRotate: ({ matchUtilities, theme }) => {
2805
- matchUtilities(
2806
- {
2807
- 'backdrop-hue-rotate': (value) => {
2808
- return {
2809
- '--tw-backdrop-hue-rotate': `hue-rotate(${value})`,
2810
- '@defaults backdrop-filter': {},
2811
- 'backdrop-filter': cssBackdropFilterValue,
2812
- }
2813
- },
2814
- },
2815
- { values: theme('backdropHueRotate'), supportsNegativeValues: true }
2816
- )
2817
- },
2818
-
2819
- backdropInvert: ({ matchUtilities, theme }) => {
2820
- matchUtilities(
2821
- {
2822
- 'backdrop-invert': (value) => {
2823
- return {
2824
- '--tw-backdrop-invert': `invert(${value})`,
2825
- '@defaults backdrop-filter': {},
2826
- 'backdrop-filter': cssBackdropFilterValue,
2827
- }
2828
- },
2829
- },
2830
- { values: theme('backdropInvert') }
2831
- )
2832
- },
2833
-
2834
- backdropOpacity: ({ matchUtilities, theme }) => {
2835
- matchUtilities(
2836
- {
2837
- 'backdrop-opacity': (value) => {
2838
- return {
2839
- '--tw-backdrop-opacity': `opacity(${value})`,
2840
- '@defaults backdrop-filter': {},
2841
- 'backdrop-filter': cssBackdropFilterValue,
2842
- }
2843
- },
2844
- },
2845
- { values: theme('backdropOpacity') }
2846
- )
2847
- },
2848
-
2849
- backdropSaturate: ({ matchUtilities, theme }) => {
2850
- matchUtilities(
2851
- {
2852
- 'backdrop-saturate': (value) => {
2853
- return {
2854
- '--tw-backdrop-saturate': `saturate(${value})`,
2855
- '@defaults backdrop-filter': {},
2856
- 'backdrop-filter': cssBackdropFilterValue,
2857
- }
2858
- },
2859
- },
2860
- { values: theme('backdropSaturate') }
2861
- )
2862
- },
2863
-
2864
- backdropSepia: ({ matchUtilities, theme }) => {
2865
- matchUtilities(
2866
- {
2867
- 'backdrop-sepia': (value) => {
2868
- return {
2869
- '--tw-backdrop-sepia': `sepia(${value})`,
2870
- '@defaults backdrop-filter': {},
2871
- 'backdrop-filter': cssBackdropFilterValue,
2872
- }
2873
- },
2874
- },
2875
- { values: theme('backdropSepia') }
2876
- )
2877
- },
2878
-
2879
- backdropFilter: ({ addDefaults, addUtilities }) => {
2880
- addDefaults('backdrop-filter', {
2881
- '--tw-backdrop-blur': ' ',
2882
- '--tw-backdrop-brightness': ' ',
2883
- '--tw-backdrop-contrast': ' ',
2884
- '--tw-backdrop-grayscale': ' ',
2885
- '--tw-backdrop-hue-rotate': ' ',
2886
- '--tw-backdrop-invert': ' ',
2887
- '--tw-backdrop-opacity': ' ',
2888
- '--tw-backdrop-saturate': ' ',
2889
- '--tw-backdrop-sepia': ' ',
2890
- })
2891
- addUtilities({
2892
- '.backdrop-filter': {
2893
- '@defaults backdrop-filter': {},
2894
- 'backdrop-filter': cssBackdropFilterValue,
2895
- },
2896
- '.backdrop-filter-none': { 'backdrop-filter': 'none' },
2897
- })
2898
- },
2899
-
2900
- transitionProperty: ({ matchUtilities, theme }) => {
2901
- let defaultTimingFunction = theme('transitionTimingFunction.DEFAULT')
2902
- let defaultDuration = theme('transitionDuration.DEFAULT')
2903
-
2904
- matchUtilities(
2905
- {
2906
- transition: (value) => {
2907
- return {
2908
- 'transition-property': value,
2909
- ...(value === 'none'
2910
- ? {}
2911
- : {
2912
- 'transition-timing-function': defaultTimingFunction,
2913
- 'transition-duration': defaultDuration,
2914
- }),
2915
- }
2916
- },
2917
- },
2918
- { values: theme('transitionProperty') }
2919
- )
2920
- },
2921
-
2922
- transitionDelay: createUtilityPlugin('transitionDelay', [['delay', ['transitionDelay']]]),
2923
- transitionDuration: createUtilityPlugin(
2924
- 'transitionDuration',
2925
- [['duration', ['transitionDuration']]],
2926
- { filterDefault: true }
2927
- ),
2928
- transitionTimingFunction: createUtilityPlugin(
2929
- 'transitionTimingFunction',
2930
- [['ease', ['transitionTimingFunction']]],
2931
- { filterDefault: true }
2932
- ),
2933
- willChange: createUtilityPlugin('willChange', [['will-change', ['will-change']]]),
2934
- content: createUtilityPlugin('content', [
2935
- ['content', ['--tw-content', ['content', 'var(--tw-content)']]],
2936
- ]),
2937
- forcedColorAdjust: ({ addUtilities }) => {
2938
- addUtilities({
2939
- '.forced-color-adjust-auto': { 'forced-color-adjust': 'auto' },
2940
- '.forced-color-adjust-none': { 'forced-color-adjust': 'none' },
2941
- })
2942
- },
2943
- }