TailwindCSS(3)-函数与指令

Functions & Directives

link

@tailwind

Use the @tailwind directive to insert Tailwind's base, components, utilities and screens styles into your CSS.

@apply

自定义css提取，在scss里可以定义自己的class使用tailwind的class Use @apply to inline any existing utility classes into your own custom CSS.

@variants

You can generate responsive, hover, focus, active, and other variants of your own utilities by wrapping their definitions in the @variants directive

@responsive

把自定义的样式和tailwind定义的响应式样式相结合的功能

You can generate responsive variants of your own classes by wrapping their definitions in the @responsive directive:

@screen

方便的响应式语法糖

@media (min-width: 640px) = @screen sm

theme()

用tailwind里的东西放进自定义css

stylelint

stylelint报错，配置

rules:{
  'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules:['responsive', 'variants', 'tailwind', 'apply', 'screen']
      },
    ]
}