Tailwind css 适用于新课程不起作用

Posted

技术标签:

【中文标题】Tailwind css 适用于新课程不起作用【英文标题】:Tailwind css apply on new class does not work 【发布时间】:2021-11-27 17:31:17 【问题描述】:

我正在尝试在 tailwind-CSS 配置中添加新颜色。

并在课堂内使用新颜色作为背景。

但我得到了错误:

// index.scss
// Here I am trying to apply green-100 as a background color
.focus-unanswered-question 
  @apply: bg-green-100;
  transition: background-color 1s ease;

由于这段代码,我收到下一条错误消息:

错误:需要一个伪类或伪元素。


    // tailwind.config.js
    module.exports = 
      theme: 
        ,
        colors: 
          transparent: 'transparent',
          black: '#000',
          white: '#FFF',
          status: 
            yellow: '#ffbf29',
            red: '#cc2a18',
          ,
          green: 
            100: '#fbfcfc',
          ,
    

【问题讨论】:

我认为apply 后面不应该有冒号。见***.com/questions/41067550/what-is-apply-in-css。 天哪,你是对的 【参考方案1】:

@apply之后删除:

.focus-unanswered-question 
  @apply bg-green-100;
  transition: background-color 1s ease;

【讨论】:

以上是关于Tailwind css 适用于新课程不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Tailwind css translate-y-full 不起作用

Tailwind CSS 动画在 ReactJs/NextJs 中不起作用

Flexbox Tailwind CSS 内联块不起作用

Tailwind css 背景图片对我不起作用

为啥 tailwind css 在 iPhone ios 设备上不起作用?

为啥文本颜色在 Tailwind css + next.js 项目中不起作用