前端React+TailwindCSS+daisyUI开发环境的快速搭建

TailWindCSS本质上是一个工具集，包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等工具类，可以组合使用并直接在 HTML 代码上实现任何 UI 设计。Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。他快速、灵活、可靠，没有运行时负担。

daisyUI最流行的TailwindCSS组件库，包含了一些常见的web组件，使用方便，结合TailwindCSS使用更是丝滑流畅。

安装TailwindCSS

如果你使用webStorm,可以直接创建一个全新的vite react项目，如果使用vscode可以在终端使用如下命令：

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

进入目录后：安装TailwindCSS并初始化：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

初始化之后会发现tailwind.config.js，打开修改文件内容如下：

/** @type {import('tailwindcss').Config} */
export default {
content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
    extend: {},
},
plugins: [],
}

并在 ./src/index.css中添加：

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

配置daisyUI

安装 daisyUI:

npm i -D daisyui@latest

然后，在你的tailwind.config.js文件里追加 daisyUI 的设置:

module.exports = {
//...
plugins: [require("daisyui")],
}

运行调试

npm run dev

修改app.jsx添加一些daisyUI的组件进行测试:

<>
    <button className="btn">Button</button>
    <button className="btn btn-neutral">Neutral</button>
    <button className="btn btn-primary">Button</button>
    <button className="btn btn-secondary">Button</button>
    <button className="btn btn-accent">Button</button>
    <button className="btn btn-ghost">Button</button>
    <button className="btn btn-link">Button</button>

  <p className = "bt-4">
    tailwindCSS and daisyUI
  </p>

如果可以正常预览到daisyUI按钮，还有bt-4也实现了TailwindCSS，那么，恭喜你，React+TailwindCSS+daisyUI开发环境已经搭建好了。