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",
      },
    },
  },
};
相关推荐
狂炫一碗大米饭几秒前
Event Loop事件循环机制,那是什么事件?又是怎么循环呢?
前端·javascript·面试
IT、木易2 分钟前
大白话Vue Router 中路由守卫(全局守卫、路由独享守卫、组件内守卫)的种类及应用场景
前端·javascript·vue.js
顾林海3 分钟前
JavaScript 变量与常量全面解析
前端·javascript
程序员小续3 分钟前
React 组件库:跨版本兼容的解决方案!
前端·react.js·面试
乐坏小陈4 分钟前
2025 年你希望用到的现代 JavaScript 模式 【转载】
前端·javascript
生在地上要上天4 分钟前
从600行"状态地狱"到可维护策略模式:一次列表操作限制重构实践
前端
oil欧哟6 分钟前
🥳 做了三个月的学习卡盒小程序,开源了!
前端·vue.js·微信小程序
奶球不是球10 分钟前
el-table(elementui)表格合计行使用以及滚动条默认样式修改
前端·vue.js·elementui
liuyang___12 分钟前
vue管理布局左侧菜单栏NavMenu
前端·javascript·vue.js
@业精于勤荒于嬉21 分钟前
将图片存储至阿里云 OSS
前端·阿里云·云计算·oss