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']
      },
    ]
}