tailwindcss：安装避坑，从 0 到项目跑通

目录

[第一章 背景](#第一章 背景)

[第二章 安装步骤](#第二章 安装步骤)

[第三章 配置文件细节](#第三章 配置文件细节)

[第四章 优化](#第四章 优化)

[第五章 提供vscode插件](#第五章 提供vscode插件)

---

第一章 背景

• 看到官方文档有对应的教程小编本来不准备写的，但是小编在装的过程中踩到了好几个坑，最终还是决定把这个单纯拧出来写一下，希望能帮到大家！！当然，没帮到也勿怪！！
• 下面是官方文档，官方文档固然香，但真到下手时，依赖版本、框架差异、缓存玄学、路径大小写......每一步都可能让人原地爆炸。本文基于Tailwind CSS v3.4.x ，亲测有效，Vue / React / 原生 HTML 三通用。如果你也被 v4 劝退，欢迎回退 v3，一起稳一手。

Installation - Tailwind CSS

第二章 安装步骤

• 核心依赖：（很重要，三兄弟缺一不可！）

npm install -D tailwindcss postcss autoprefixer

• 生成配置文件：（可以手动添加，也能用命令配置，如下：）

npx tailwindcss init -p

生成如下两个文件：

• src/style.css的（只要是样式文件就好，记得在main.js导入）顶部写：

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

（不用管警告！别陷进去了！）

第三章 配置文件细节

• tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    colors: {
      'blue': 'red', // 注意这里为了显眼，特地改了一下
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    extend: {},
  },
  plugins: [],
}

-- 查看是否生效：

<div class="mt-4">
      <h4 class="font-bold mb-2">测试自定义颜色配置：</h4>
      <div class="text-blue text-lg font-bold"
        >text-blue 应该显示为红色（配置中blue被定义为red）</div
      >
      <div class="text-purple text-lg font-bold mt-2">text-purple 应该显示为紫色</div>
      <div class="text-green text-lg font-bold mt-2">text-green 应该显示为绿色</div>
</div>

• tailwind.config.js（Vite 会自动读取，无需手动 import）

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

第四章 优化

• 小编研究的方法，添加一个cs方法：（作用：可以将类似功能类名分块写，比如宽高、边框、伸缩布局写一起等；以及代码格式化）

import { isArray, isObject, isString } from './is'
 
export const cs = (...args) => {
  const length = args.length
  let classNames = []
  for (let i = 0; i < length; i++) {
    const v = args[i]
    if (!v) {
      continue
    }
    if (isString(v)) {
      classNames.push(v)
    } else if (isArray(v)) {
      classNames = classNames.concat(v)
    } else if (isObject(v)) {
      Object.keys(v).forEach((k) => {
        if (v[k]) {
          classNames.push(k)
        }
      })
    } else {
      console.warn(true, 'arguments must be one of string/array/object.')
    }
  }
  return [...new Set(classNames)].join(' ')
}

const _toString = Object.prototype.toString
 
export function isNumber(val) {
  return _toString.call(val) === '[object Number]'
}
export function isBoolean(val) {
  return _toString.call(val) === '[object Boolean]'
}
export function isArray(val) {
  return _toString.call(val) === '[object Array]'
}
export function isObject(val) {
  return _toString.call(val) === '[object Object]'
}
export function isString(val) {
  return _toString.call(val) === '[object String]'
}
export function isUndefined(val) {
  return _toString.call(val) === '[object Undefined]'
}
export function isFunction(val) {
  return _toString.call(val) === '[object Function]'
}

• 优化后对比（直接使用class类名是不是格式化换行的，用小编给的方法之后改成了函数的形式，格式化就能换行，阅读性也更强）

第五章 提供vscode插件

• 最后如果大家也想像小编一样，悬浮到自己写的原子类名上面能有样式效果！！

• 跟小编一样，安装Tailwind CSS IntelliSense即可！！