Я пытаюсь настроить плагин Tailwind Typography следующим образом:
typography (theme) {
return {
DEFAULT: {
css: {
'code::before': {
content: 'none', // don’t generate the pseudo-element
//content: '""', // this is an alternative: generate pseudo element using an empty string
},
'code::after': {
content: 'none'
},
code: {
color: theme('colors.slate.700'),
fontWeight: "400",
backgroundColor: theme('colors.stone.100/30'),
borderRadius: theme('borderRadius.DEFAULT'),
borderWidth: '1px',
paddingLeft: theme('spacing[1.5]'),
paddingRight: theme('spacing[1.5]'),
paddingTop: theme('spacing[0.5]'),
paddingBottom: theme('spacing[0.5]'),
},
}
},
invert: {
css: {
code: {
color: theme('colors.slate.100'),
backgroundColor: theme('colors.slate.800'),
borderColor: theme('colors.slate.600'),
}
}
}
}
},
Как я могу применить значение цвета к backgroundColor - на основе одного из встроенных цветов с примененной непрозрачностью? Например colors.slate.800 / 50 (что не работает)
Это сложно. Проблема в том, что функция theme будет возвращать HEX-значение для цветов — она просто получает значение из разрешенной конфигурации в точечной записи. Так что theme('colors.red.500/300') не действует (по крайней мере пока. Думаю стоит открыть PR или Обсуждение)
Все, что вам нужно для решения проблемы, это преобразовать HEX в RGB. Я знаю два способа Tailwind, но, конечно, вы можете использовать любой похожий подход.
Первый — конвертировать с помощью функции Tailwind withAlphaVariable. Он принимает объект со свойством CSS, именем цвета и именем переменной.
const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable')
module.exports = {
theme: {
extend: {
typography: ({theme}) => {
// This will create CSS-like object
// you should destruct and override CSS-variable with desired opacity
const proseCodeBgColor = withAlphaVariable({
color: theme('colors.red.500'), // get color from theme config
property: 'background-color',
variable: '--tw-my-custom-bg-opacity', // could be any
})
return {
DEFAULT: {
css: {
code: {
...proseCodeBgColor,
'--tw-my-custom-bg-opacity': '.3', // opacity
},
}
},
}
}
},
},
plugins: [
require('@tailwindcss/typography')
],
}
Второй намного проще - используйте директиву @apply. Передайте нужные утилиты Tailwind в качестве ключа и пустой объект в качестве значения
module.exports = {
theme: {
extend: {
typography: ({theme}) => {
return {
DEFAULT: {
css: {
code: {
// you may pass as much utilities as you need eg `@apply bg-red-500/30 text-lg font-bold`: {}
'@apply bg-red-500/30': {},
},
}
},
}
}
},
},
plugins: [
require('@tailwindcss/typography')
],
}
Стоит отметить, что вы можете настроить фон кода как утилиту prose-code:bg-blue-500/50
<div class = "prose prose-code:bg-blue-500/50">
<code>
npm install tailwindcss
</code>
</div>