witch@&*weaves

学习tailwind

配置

没想到我也终于遇到了经典问题之卡在第一步配置，单纯使用npm install -D tailwindcss下载的是v4，v4安装方法改了，大多数教程都是v3的，所以没办法跟着配置，外加上v4有很多不稳定的地方，最后卸载了v4换了v3版本，我没有使用vite（还没学也不会）。

让ai写的指令：

# 1. 卸载 v4
npm uninstall tailwindcss

# 2. 安装稳定的 v3
npm install -D tailwindcss@^3

# 3. 初始化配置
npx tailwindcss init

# 4. 查看版本确认
npm list tailwindcss

最后到手的文件有：

my-project/
├── index.html         
├── src/
│   ├── input.css       
│   └── output.css          
├── package.json
├── tailwind.config.js  # Tailwind配置
└── postcss.config.js   # PostCSS配置（可选）

index.html需要在head里加入代码，引入Output.css：

<link href=".src//output.css" rel="stylesheet" />

input.css是Tailwind 输入文件。在里面加入代码引入：

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

output.css是根据html文件内的修改，生成的文件，一般不会动它。

package.json是配置Node包的，在里面写指令设定，不配置这个就没办法通过指令生成output.css。：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "tailwindcss -i ./tailwind/input.css -o ./tailwind/output.css --watch",
    "build": "tailwindcss -i ./tailwind/input.css -o ./tailwind/output.css --minify",
  },

tailwind.config.js是配置文件，最主要需要修改content内容，让tailwind根据content内容配置扫描文件。theme等都是自定义css时改的，我暂时还没研究。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",          
    "./*.html",             
  ], 
  theme: {
    extend: {},
  },
  plugins: [],
}

如果想要生成output.css，让tailwind生效，需要再在bash里输入指令进行构建：

npx tailwindcss -i ./src/input.css -o ./dist/output.css

# 开发模式（监听变化）
npm run dev  # 实时预览 --watch

# 生产构建（压缩）
npm run build  # 压缩，部署前优化， --minify

运行 npm run build 会：

  1. 读取 src/input.css
  2. 扫描 tailwind.config.js 中 content 指定的文件
  3. 提取 这些文件中使用的 Tailwind 类
  4. 生成 对应的 CSS
  5. 压缩（--minify 会移除空格、注释等）
  6. 写入 dist/output.css

平时写的时候只需要输入npm run dev预览就行了

配置顺序是：package.json→tailwind.config.js→input.css→index.html

哲学

tailwind的中心思想就是不破不立，css命名麻烦？那就不命名了；css层叠性太模糊？那就只在单个元素上改css，别惠及上下——所以写起来很不习惯，而且很多css名字被重新命名了要去搜文档，不得不说这招真是巧思，开源软件靠读文档引流，css不就是这样琐碎得需要频繁查的语言嘛。

#code