此页面需要javascript支持,请在浏览器中启用javascript

TailwindCSS(3)-函数与指令

css
共179个字,阅读时间 1 分钟
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://icebreaker.top/articles/2020/10/Tailwind-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']
      },
    ]
}