wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

JIT: Add per-side border colors (#4404)

Browse source
This commit is contained in:
Adam Wathan 2021-05-20 13:35:39 -04:00 • committed by GitHub
parent 787348b373
commit d8bd507b9b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 88 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/plugins/borderColor.js
View file

@ -2,7 +2,7 @@ import flattenColorPalette from '../util/flattenColorPalette'
import withAlphaVariable from '../util/withAlphaVariable'
export default function () {
return function ({ addBase, matchUtilities, theme, variants, corePlugins }) {
return function ({ config, addBase, matchUtilities, theme, variants, corePlugins }) {
if (!corePlugins('borderOpacity')) {
addBase({
'*, ::before, ::after': {
@ -41,5 +41,71 @@ export default function () {
type: 'color',
}
)
if (config('mode') === 'jit') {
matchUtilities(
{
'border-t': (value) => {
if (!corePlugins('borderOpacity')) {
return {
'border-top-color': value,
}
}
return withAlphaVariable({
color: value,
property: 'border-top-color',
variable: '--tw-border-opacity',
})
},
'border-r': (value) => {
if (!corePlugins('borderOpacity')) {
return {
'border-right-color': value,
}
}
return withAlphaVariable({
color: value,
property: 'border-right-color',
variable: '--tw-border-opacity',
})
},
'border-b': (value) => {
if (!corePlugins('borderOpacity')) {
return {
'border-bottom-color': value,
}
}
return withAlphaVariable({
color: value,
property: 'border-bottom-color',
variable: '--tw-border-opacity',
})
},
'border-l': (value) => {
if (!corePlugins('borderOpacity')) {
return {
'border-left-color': value,
}
}
return withAlphaVariable({
color: value,
property: 'border-left-color',
variable: '--tw-border-opacity',
})
},
},
{
values: (({ DEFAULT: _, ...colors }) => colors)(
flattenColorPalette(theme('borderColor'))
),
variants: variants('borderColor'),
type: 'color',
}
)
}
}
}