tailwind的使用感受tailwind入门，推荐以某个UI框架为基准，遇到需要特殊调的间隙、颜色等，就用tailwi

tailwind是一个原子化css框架，在项目中使用总结

1、什么是原子化css

每一天样式就是一个class名，在写html的时候，用这些class组合成自己需要的样式。

不需要去想class业务上的名称。

既然每条样式是一个class，那么为什么不用style？style权重太大，很多特性比如响应式不支持

tailwindcss官网的介绍：无需离开html上可以快速构建web应用。一个以功能类优先的CSS框架，包含了 flex, pt-4, text-center 和 rotate-90 等类，可以直接在你的文本编辑中组成任何设计。

stateofcss的调查报告

2、在vue项目中如何使用

安装依赖

npm install -D tailwindcss postcss autoprefixer

# -p表示创建postcss.config.js
npx tailwindcss init -p

会自动创建 tailwind.config.js 和 postcss.config.js 这2个文件

// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ]
};

新建/assets/tailwind.css

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

在/main.js中引入

import './assets/tailwind.css'

在vue组件中即可编写

<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>

3、优势

使用tailwind优点：

开箱即用，tailwind集成了一套设计好的design。

比如w-1这里的1=0.25rem=4px

<div class="w-20 h-20 bg-red-500"></div>

比如一整套美观颜色体系

但当需要精准控制的时候，也可以直接用下面方式设置

<div class="w-[100px] h-[100px] bg-[#67c23a]"></div>

不太推荐上面这种写法，一般来说一套UI，视觉上对颜色对大小对距离等都会有一个统一的取值。

哪天需要换肤的时候上面的写法都需要处理，也可能对大小轻易的脱离了设计稿规范的范围。

按需编译

用到的css才会编译进去，因此不支持过度动态设置class，比如下面代码

<template>
  <div :class="classes">sdfsdf</div>
</template>

<script setup>
const num = 200;
const classes = 'w-21 h-21 bg-red-' + num;
</script>

响应式，移动端优先

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

断点前缀	最小宽度	CSS
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

支持hover、focus等伪类

<div class="w-20 h-20 bg-red-500 hover:bg-green-500"></div>

支持::placeholder、::selection等伪元素

<input type="email" name="email" class="w-30 h-10 border rounded pl-1 border-slate-300 placeholder-blue-400 focus:border-red-500 focus:outline-none"  placeholder="请输入邮箱" />

支持暗黑模式

<div class="w-20 h-20 bg-red-500 dark:bg-green-500"></div>

也可以组合使用

<div class="w-20 h-20 bg-red-500 hover:dark:bg-yellow-500"></div>

复用比如现在有2个一样的按钮，那就回出现下面的情况，相同的代码会出现2次

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  提交
</button>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  返回
</button>

没人希望每次用到按钮的时候都写这样一推class，而且不好维护。

推荐方案一，借用vue等框架，实现组件的复用。

<template>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    <slot></slot>
  </button>
</template>

方案二，通过 @apply 指令可以实现样式的复用

<template>
  <div class="demo"></div>
</template>

<style>
.demo {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
</style>

3、tailwind的配置

当tailwind自带的样式不满足的时候，可以通过tailwind.config.js进一步的扩展

已有的配置文件: 链接

module.exports = {
  // 暗黑模式改为根据html的class切换
  darkMode: 'class',
  prefix: 'el-', // 统一设置前缀
  important: true, // 生成的css都会加上 !important
  theme: {
    // 这里是覆盖
    // backgroundColor: {
    //   primay: '#409eff',
    //   success: '#52c718',
    // },
    // 这里是扩展
    extend: {
      // 响应式断点
      screens: {
        'tablet': '640px',
        'laptop': '1024px',
        'desktop': '1280px',
      },
      // 对bg其效果
      backgroundColor: {
        primay: '#409eff',
        'primay-light': '#79bbff',
        'primay-active': '#337ecc'
      },
      // 对bg/text等都起效果
      colors: {
        primay: '#409eff',
        success: '#52c718',
      },
      // 对width/height/margin/padding等都其效果
      spacing: {
        '21': '32rem',
      }
    },
  },
};

4、tailwind的缺点

tailwind的优点明显，缺点也明显

单位是转化为rem，不好理解
class太长，维护难，不好理解
动态设置class麻烦，需要在配置保留项目

5、在项目中的建议

以element-ui等UI为主，遇到需要特定的时候，不需要去起个class名，直接用tailwind来书写