以下集成内容对TailwindCSS的集成与使用进行说明，如需进行代码对照，可参考目录下 react19_ts 项目内实际代码，文档与代码会在git上持续补充 git仓库地址：https://gitee.com/xiaoli-account/react19_ts> 本项目使用 **TailwindCSS v4.1.18**，基于 Vite 插件集成。
> v4 使用 `@use "tailwindcss"` 引入（不再使用 v3 的 `@tailwind` 指令）
> 原子化 CSS 框架
1. TailwindCSS 样式库集成
https://tailwindcss.com/docs/installation/using-vite
1、安装
npm install tailwindcss @tailwindcss/postcss autoprefixer
2、配置
// vite.config.tsimport tailwindcss from '@tailwindcss/vite';export default defineConfig({ plugins: [react(), tailwindcss()],});
// tailwind.config.jsmodule.exports = { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], theme: { extend: {}, }, plugins: [],};
/* src/index.css */@import 'tailwindcss';
3、使用示例
function Button() { return ( <buttonclassName="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Click me</button> );}
2、tailwindcss的常见使用
https://tailwind.nodejs.cn/
https://tailwindcss.com/plus
参考上方文档，学习tailwindcss的常见使用，这里就不做过多赘述。
- 建议
- 1、在学习时，先学习它的命名规则，如：bg\text\flex\m\b\l\r，还有颜色的命名规则，了解后可以让你快速上手。
- 2、使用熟练后，即可通过其自带的搜索功能，查找自己想要的样式名称。
