有没有办法更改顺风默认样式选项？

Question

我正在使用 NextJS 构建博客。显然在 Tailwind 的 list style type 中，默认样式是 list-none。所以我的应用程序中的每个 <ul> <li> 元素都没有样式。

我使用 remark 来处理 .md 文件和我的函数 returns <ul> <li> 没有 classes 所以在这种情况下我不能指定class通过手动编写它们。

有什么方法可以更改此默认样式，使我的 <ul> <li> 不是纯文本吗？
或者有没有办法给所有 <ul> <li> 一个 list-disc class？
或者是否有任何方法可以将某些 <div> 排除在 Tailwind 的样式之外？
其他方法？

我试过了

// tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     listStyleType: false,
    }
  }

但是并没有解决问题。

如有任何帮助，我们将不胜感激。

Answer 1

指令

您可以使用 preprocessor like PostCSS you can use the @apply or use the @layer 指令。

ul {
 @apply list-disc;
}

OR

@tailwind base;
@layer base{
 ul {
  @apply list-disc;
 }
}

基本样式

您也可以使用base styles

// tailwind.config.js

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addBase, theme }) {
      addBase({
        'ul': { listStyle: 'disc' },
      })
    })
  ]
}

Answer 2

您可以像这样从 tailwind.config.js 中禁用顺风默认规范化样式 (preflight)：

module.exports = {
  corePlugins: {
    preflight: false,
  }
};

有没有办法更改顺风默认样式选项？

Is there a way to change tailwind default style option?

html

css

html-lists

next.js

tailwind-css

指令

基本样式