伪元素在 tailwind 中不起作用之前和之后 CSS

Question

我正在使用 Tailwind 在我的 NextJS 项目中提供的排版插件。

它在 code 标签内显示内容，并在其周围加上反引号。我正在尝试删除这些反引号。所以我在我的 globals.css 文件中尝试了 .prose code::before {content: "";} 但它没有效果。当我从 Firefox 样式编辑器更改它时，它会起作用。

知道为什么它不起作用吗？

/* globals.css inside NextJS Project */
.prose code::before {
  content: "";
}

.prose code::after {
  content: "";
}

Answer 1

使用 !important，这对我有用。

/* app.css */
.prose code::before {
    content: "" !important;
}

.prose code::after {
    content: "" !important;
}

Answer 2

您可以在不涉及 CSS 文件的情况下执行此操作。

只需在 tailwind.config.js 中添加一些自定义代码即可：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            code: {
              '&::before': {
                content: 'none !important',
              },
              '&::after': {
                content: 'none !important',
              },
            },
          },
        },
      }
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

伪元素在 tailwind 中不起作用之前和之后 CSS

Before and after pseudo elements not working in tailwind CSS

css

tailwind-css

pseudo-element