英文:
Overwrite content of before pseudo-element in tailwind css typography plugin
问题
我想自定义 Tailwind 的 prose 类（typography 插件的默认行为）。具体来说，我想移除 code::before 和 code::after 中的反引号。
我尝试了以下方法：
tailwind.config.js
/** @type {import('tailwindcss').Config} */
import defaultTheme from 'tailwindcss/defaultTheme';
module.exports = {
content: [],
theme: {
extend: {
typography: {
DEFAULT: {
css: {
code: {
'background-color': '#e5e7eb',
// before 和 after 仍然显示反引号，但应为空
'&::before': {
content: '""',
},
'&::after': {
content: '""',
},
'border-radius': '0.25rem',
}
}
}
}
}
},
plugins: [
require('@tailwindcss/typography'),
],
}
这是在 Firefox Dev Tools 中的结果：
我该如何修复这个问题？提前感谢。
有关链接：
英文:
I want to customize default behavior of tailwind's prose class from typography plugin. Specifically I want to remove backticks from code::before and code::after.
I've tried the following approach:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
import defaultTheme from 'tailwindcss/defaultTheme'
module.exports = {
content: [],
theme: {
extend: {
typography: {
DEFAULT: {
css: {
code: {
'background-color': '#e5e7eb',
// before and after are still showing backticks, but should be empty
'&::before': {
content: '""',
},
'&::after': {
content: '""',
},
'border-radius': '0.25rem',
}
}
}
}
}
},
plugins: [
require('@tailwindcss/typography'),
],
}
Here is the result in Firefox Dev Tools:
How can I fix this? Thanks in advance.
Relevant links:
答案1
得分: 0
module.exports = {
theme: {
extend: {
typography: {
DEFAULT: {
css: {
'code::before': {
content: 'normal',
},
'code::after': {
content: 'normal',
},
code: {
'background-color': '#e5e7eb',
'border-radius': '0.25rem',
},
},
},
},
},
},
plugins: [require('@tailwindcss/typography')],
}
英文:
The before and after pseudo elements need to be defined like this:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
typography: {
DEFAULT: {
css: {
'code::before': {
content: 'normal',
},
'code::after': {
content: 'normal',
},
code: {
'background-color': '#e5e7eb',
'border-radius': '0.25rem',
},
},
},
},
},
},
plugins: [require('@tailwindcss/typography')],
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论