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",
      },
    },
  },
};
相关推荐
前端的日常几秒前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常2 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc10186 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28113 分钟前
Chrome插件开发
前端
前端 贾公子26 分钟前
Monorepo + vite 怎么热更新
前端
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf