TailwindCss实战总结

之前的文章 对 Tailwindcss 做了基本介绍，下面总结了使用中遇到的问题：

1，颜色增加透明度

官方文档

方式1

<div class="bg-black/20 text-black/60"></div>

bg-black/20 相当于

background-color: rgba(0,0,0,0.2);
background-color: rgb(0 0 0 / 0.2);

text-black/60 相当于：

color: rgba(0,0,0,0.6);
color: rgb(0 0 0 / 0.6);

方式2

和上面的效果一样

<div class="text-black/[.6]"></div>

2，负值

官方文档，有负值的属性，都可以通过加前缀 - 来实现。

在官方文档中全局搜索 negative values 就能看到有哪些支持负值的 css 属性了。

<!-- z-index: -50; -->
<div class="-z-50">下雪天的夏风</div>

3，自定义任意值

虽然 tailwindcss 有许多预设值，但还会有不满足的时候。有2种方式可以实现自定义

方式1

使用方法：用[ ]表示自定义属性值。基本每个 tailwindcss 的 class 都支持。

适合 css 属性只在这里用到，其他地方用不到，那就随用随定义

<!-- z-index: 100; max-height: 80%; margin: -30px; color: #50d71e-->
<div class="z-[100] max-h-[80%] m-[-30px] text-[#50d71e]">下雪天的夏风</div>

方式2

全局配置扩展。适合类似设置主题色一样的需求，因为项目中许多地方都会用到。

tailwindcss 官网中大多属性对应的右侧菜单都有配置教程。

// tailwindcss.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        "regal-blue": "#243c5a",
      },
      // 所有长度相关的都生效
      spacing: {
        15: "3.75rem",
      },
      // 只对 maxHeight 生效
      maxHeight: {
        "4/5": "80%",
      },
    }
  }
}

<!-- max-height: 80%; width: 3.75rem; color: #243c5a; -->
<div class="max-h-4/5 w-15 text-regal-blue">下雪天的夏风</div>

4，@apply问题

@apply-tailwindcss 官网

上篇关于 tailwindcss 的文章中介绍了，虽然可以用下面的写法，但是有前提的。

.primary-button {
  @apply inline-block bg-sky-500 p-4;
}

@apply在 vue 文件的 <style> 标签中是不生效的，因为vue 是独立处理 <style>。

@apply有2种使用方式

1，定义在全局 css 中，

比如src/style.css 中，

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

.box {
  @apply w-20 h-20;
}

2，使用 plugin 插件的方式

/** @type {import('tailwindcss').Config} */

const plugin = require("tailwindcss/plugin");
export default {
  content: ["./src/**/*.{html,vue,js}"],
  plugins: [
    plugin(function ({ addComponents, theme }) {
      addComponents({
        ".card": {
          backgroundColor: theme("colors.white"),
          borderRadius: theme("borderRadius.lg"),
          padding: theme("spacing.6"),
          boxShadow: theme("boxShadow.xl"),
        },
      });
    }),
  ],
};

<div class="box">123</div>

以上。
待续