tailwindcss 3.4.0 → 4.0.0-alpha.1

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