Tailwind css系列教程（四）

高级应用

1、指令

@tailwind ：使用 @Tailwind 指令将 Tailwind 的 base, components, utilities 插入到 CSS 中。
@apply ：使用 @apply 将任何样式内联到您自己的自定义 CSS 中。
@layer ：使用 @layer 指令告诉 Tailwind 属于一组自定义样式的 "块"。在 base, components, utilities 有效。
@variants ：您可以通过在 @variants 指令中包装它们的定义来生成响应式、hover, focus, active 和其他伪类。
@responsive ：通过将 class 的定义包装在 @responsive 指令中，您可以生成自己 class 的响应式。
@screen : 使用@screen指令并按名称引用断点，而不是在您自己的CSS中复制它们的值。
theme()：使用 theme() 函数访问你的 Tailwind 配置值。

2、@apply语法应用

复制代码

<div class="menu">菜单1</div>
<div class="menu">菜单2</div>
<div class="menu">菜单3</div>
<div class="menu">菜单4</div>

.menu {
  @apply p-2 text-red-500 font-semibold;
}

优化--for循环加入标签

实用，项目开发数据一般都是动态得

复制代码

<div  v-for="menu in ['菜单1', '菜单2', '菜单3', '菜单4']"
    :key="menu"
    class="p-2 text-red-500 font-semibold"
    >
    {{ menu }}
</div>

3、@layer应用

自定义样式

因为tailwind是最基础的框架，tailwindcss默认的utility，base，component 不足以满足所有的场景；

使用 @layer 指令，Tailwind 自动将这些样式移动到 @tailwind base， @tailwind utility，@tailwind component 的位置

复制代码

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    h1 {
        font-size: 2rem;
    }
}
@layer components {
    btn-blue {
        @apply bg-blue-500 px-4 py-2 rounded-xl font-bold hover:bg-blue-700;
    }
}
@layer utilities {
  @variants hover, focus {
    .filter-none {
      filter: none;
    }
  }
  @responsive {
    .bg-opacity-none {
      @apply opacity-0;
    }
  }
}

4、theme（）应用

复制代码

最后一项用tailwind的内容
div {
  border-top: 1px solid theme('colors.red.200');
}

5、Tailwind配置之外扩展

复制代码

绘制一个宽222px，高333px，颜色为#112243的元素
Tailwind中原始配置的class没有合适的，可如下自定义使用：

<div class="w-[222px] h-[222px] bg-[#112243]"></div>

6、响应式方案

复制代码

<div class="w-32 h-32 bg-red-900" />
@media (min-width: 768px) {
  div {
    @apply bg-green-500;
  }
}

也可以优化为一行代码

复制代码

<div class="w-32 h-32  bg-red-900 md:bg-green-500" />

也可以自定义

复制代码

<div class="w-32 h-32 max-[1210px]:bg-green-500 bg-red-900"></div>

7、自定义配置

修改配置文件：tailwind.config.js

复制代码

module.exports = {
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
    },
    fontFamily: {
      display: ["Gilroy", "sans-serif"],
      body: ["Graphik", "sans-serif"],
    },
    borderWidth: {
      default: "1px",
      "0": "0",
      "2": "2px",
      "4": "4px",
    },
    extend: {
      colors: {
        cyan: "#9cdbff",
      },
      spacing: {
        "96": "24rem",
        "128": "32rem",
      },
    },
  },
};