当前位置：首页 > article >正文

【React】React + Tailwind CSS 快速入门指南

article 2025/3/10 9:14:07

Tailwind CSS 是一个功能强大实用优先的 CSS 原子性的库，可以帮助你快速构建现代化的用户界面。

它支持的种类框架也非常的多！例如： Vite 、Next.js 等…

这个库给我们带来的好处就是可以给我们衍生出其他增强的体验！

比如说 shadcn/ui 、daisyUI 无样式 UI 库！这些 UI 库就是基于 Tailwind CSS 适配开发的！

参考： tailwindcss 官网

以下是安装和使用 Tailwind CSS 的步骤：

1.创建一个 React 项目

npm create vite@latest my-project -- --template react

cd my-project

2.安装 Tailwind CSS

2.1 首先，你需要在项目中安装 tailwindcss及其对等依赖 !

// 1.安装 Tailwind CSS
npm install -D tailwindcss@3.4.17

// 2.安装对等依赖 
npm install -D postcss autoprefixer

ps：安装时候我们要指定安装的版本与官网文档版本一致！如果不指定版本、默认安装是就是 v4 版本的 tailwindcss。

当你继续执行 npx tailwindcss init 就会报错，没有可执行文件的信息！
PS D:\lx\project\emoji-picker> npx tailwindcss init
npm ERR! could not determine executable to run

npm ERR! A complete log of this run can be found in: C:\Users\AppData\Local\npm-cache\_logs\2025-03-08T04_37_23_510Z-debug-0.log
PS D:\lx\project\emoji-picker> npx tailwindcss init
解决方式：我们切换官网的版本下载安装即可解决。
npm install -D tailwindcss@3.4.17

3. 初始化 Tailwind CSS 配置文件

3.1 安装完成后，你可以通过以下命令生成 tailwind.config.js和postcss.config.js 配置文件：

因为要分析我们的代码，把 Tailwind CSS的代码指令，编译成浏览器可以识别的 CSS。

npx tailwindcss init -p

3.2 将这些路径添加到 tailwind.config.js 文件中的所有模板文件中。

tailwind.config.js 文件允许你自定义 Tailwind 的默认配置，例如颜色、字体、间距等。

/** @type {import('tailwindcss').Config} */
export default {
 // 指定项目目录下那些文件需要处理！ 
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 创建 Tailwind CSS 入口文件

在你的项目中入口 CSS 文中引入 Tailwind 的基础样式、组件和工具类：

例如： src/index.css

ps：且必须在你的 main.js 口文件中把它引入到全局。

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

5. 在你的页面代码中使用 Tailwind CSS

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <button className='text-pink-400 px-2 py-2 bg-slate-600 rounded'> Hello World </button>
    </>
  )
}

export default App