访问官网的试用组件：Tailwind CSS Pricing Sections - Official Tailwind UI Components
复制 HTML 代码，放到一个测试文件中，预览：
这里用的 Windsurf，用 VS Code、Cursor 也一样。
嘿，咋成这样了呢？
缺乏 Tailwind CSS 环境！
你看，这里边用到了 Tailwind CSS 原子类：
<div class="relative isolate bg-white px-6 py-24 sm:py-32 lg:px-8">
而浏览器是只认 CSS，不认这些的。所以，需要转换！
那，怎么转呢？
有两种办法：
- 加 CDN；
- 配置完整的 Tailwind 环境；
CDN 比较简单，先从这个开始。
引入 CDN
CDN 一般加在 <head> 头部，但我们刚刚复制的代码不是完整的 html，只是正文部分（放在 <body> 块内），所以要补全一下。
新建一个 html，命名为 test2.html，输入一个英文感叹号：
它会快速补全 html 的结构：
然后在 <head> 内部加上 CDN，在 <body> 内部粘贴复制过来的组件代码。
Tailwind CDN：
<script src="https://cdn.tailwindcss.com"></script>
试试看：
完美！
那为什么这样就行呢？嘛原理，这是。
来，看看 Claude 的回答：
好，那完整配置呢？
完整配置 Tailwind
如果你有 Cursor Composer 或 Windsurf Cascade（都是付费的），那就是一句话的事儿：
如果暂时没有的话，那只能手动配置了。
tailwind.config.js
新建 tailwind.config.js 文件，添加以下代码：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./*.html",
"./src/**/*.{js,ts,jsx,tsx}"
],
theme: {
extend: {},
},
plugins: [],
}
让 Claude 解释一下：
content 配置千万不要用
"./**/*.{html,js}"，这是 “根目录 / 任意子目录 / 任意 html 和 js 文件”，会包括node_modules目录，增加构建负担！
input.css
在 src 目录下新建一个 input.css 文件，添加 Tailwind CSS 指令：
@tailwind base;
@tailwind components;
@tailwind utilities;
不放
src目录下边也行，但一般这么做，input.css也是一样，可以换成其他的名儿。
但无论换成什么，都要和下边要讲到的 npm 命令想匹配。
这些指令会被 Tailwind 内置的 PostCSS 依赖编译为实际的 CSS。
啥，不清楚 PostCSS 是啥？让 Windsurf 内置的 claude-3.7-sonnet 回答你：
package.json
新建 package.json 文件，添加以下代码：
{
"name": "tailwind-demo",
"version": "1.0.0",
"description": "Tailwind CSS 演示项目",
"scripts": {
"build": "tailwindcss -i ./src/input.css -o ./dist/output.css",
"watch": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
},
"devDependencies": {
"tailwindcss": "^3.4.1"
}
}
Claude，解释一下：
跑起来
-
运行
npm install，安装依赖； -
运行
npm run build（开发时建议npm run watch），编译 Tailwind CSS 指令到输出 CSS 文件（./dist/output.css）； -
注释 CDN，引入输出 CSS，让原子类样式生效，就像这样：
<link href="./dist/output.css" rel="stylesheet">
预览：
这不就成了嘛~
运行 npm run watch，然后修改金额大小，实时观察变化：
搞定！ 
）—— 直接去 