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

Posted 2023-03-07

【中文标题】有没有办法改变顺风默认样式选项？

【英文标题】：Is there a way to change tailwind default style option?

【发布时间】：2021-10-20 06:11:25

【问题描述】：

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

我使用remark 处理.md 文件，我的函数返回<ul> <li> 没有类，所以在这种情况下，我无法通过手动编写类来指定它们。

有没有办法改变这个默认样式，让我的<ul> <li> 不是纯文本？ 或者有什么方法可以为所有<ul> <li> 提供list-disc 类？ 或者有什么方法可以将某些 <div>s 排除在 Tailwind 的样式之外？ 其他方法？

我试过了

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

但这并不能解决问题。

任何帮助将不胜感激。

【参考方案1】：

指令

您可以使用preprocessor，例如PostCSS，也可以使用@apply 或@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':  list-style: 'disc' ,
      )
    )
  ]