Tailwind css系列教程(四)

发布于:2024-10-18 ⋅ 阅读:(36) ⋅ 点赞:(0)

高级应用

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",
      },
    },
  },
};


网站公告

今日签到

点亮在社区的每一天
去签到