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

Add new outline style, color, width and offset utilities (#5887)

Browse source 
* Add new outline style, color, width and offset utilities

Co-Authored-By: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

* Remove old `outline` property from default config

Co-Authored-By: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

* Tweak order of outline plugins

Co-Authored-By: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

* Revert to previous `outline-none` styles

Co-Authored-By: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

* Drop quotes from outline property

* Add offset back to `outline-none` utility

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
This commit is contained in:
Jonathan Reinink 2021-10-27 10:21:24 -04:00 • committed by GitHub
parent 06cb28d2bd
commit bf59a88c3e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 69 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/corePlugins.js
View file

@ -1794,17 +1794,36 @@ export let corePlugins = {
}
})(),
outline: ({ matchUtilities, theme }) => {
outlineStyle: ({ addUtilities }) => {
addUtilities({
'.outline-none': {
outline: '2px solid transparent',
'outline-offset': '2px',
},
'.outline': { 'outline-style': 'solid' },
'.outline-dashed': { 'outline-style': 'dashed' },
'.outline-dotted': { 'outline-style': 'dotted' },
'.outline-double': { 'outline-style': 'double' },
'.outline-hidden': { 'outline-style': 'hidden' },
})
},
outlineWidth: createUtilityPlugin('outlineWidth', [['outline', ['outline-width']]], {
type: ['length', 'number', 'percentage'],
}),
outlineOffset: createUtilityPlugin('outlineOffset', [['outline-offset', ['outline-offset']]], {
type: ['length', 'number', 'percentage'],
}),
outlineColor: ({ matchUtilities, theme }) => {
matchUtilities(
{
outline: (value) => {
value = Array.isArray(value) ? value : value.split(',')
let [outline, outlineOffset = '0'] = Array.isArray(value) ? value : [value]
return { outline, 'outline-offset': outlineOffset }
return { 'outline-color': toColorValue(value) }
},
},
{ values: theme('outline') }
{ values: flattenColorPalette(theme('outlineColor')), type: ['color'] }
)
},