只需一个命令即可安装 Tailwind CSS、PostCSS 和 daisyUI

安装、设置、配置和导入所有依赖项可能很麻烦。但现在，您只需一个命令即可完成。

手动方式

设置 Tailwind CSS、PostCSS，然后添加 daisyUI 并不难，但在每个项目中一遍又一遍地执行相同的过程可能会很烦人。

• 安装 Tailwind CSS、PostCSS 和 Autoprefixer
• 创建 tailwind.config.js 文件
• 创建 postcss.config.js 文件
• 将 Tailwind CSS 添加到 postcss.config.js
• 安装 daisyUI
• 在 tailwind.config.js 中引入 daisyUI

更简单的方式 ✨

现在，您可以使用一个命令完成所有这些操作

npm init daisyui

优点

• 您无需担心配置文件和遗漏任何内容
• 您无需每次都进行繁琐的设置和配置工作
• 您可以在现有项目或新项目中使用它
• 您可以选择仅安装 daisyUI
• 您可以选择设置 PostCSS 和 Autoprefixer 或 Tailwind CSS CLI

如何使用？

npm init daisyui为您提供 3 个选项

🌼 Initializing daisyUI…

? Do you want to setup Tailwind CSS first?
❯ No need. I already have Tailwind
  Yes. Setup Tailwind first
  Yes. Setup Tailwind first (with PostCSS)

如果这是一个新项目，或者您没有安装 Tailwind CSS，您可以选择第二个或第三个选项。否则，您可以选择第一个选项，它将跳过 Tailwind CSS 设置。

它能做什么？

1. 如果您选择第一个选项

   • 安装 daisyUI
   • 将 daiysUI 添加到您的 tailwind.config.js 文件中。

2. 如果您选择第二个选项

   • 安装 Tailwind CSS
   • 创建 tailwind.config.js 文件 (npx tailwindcss init) 使用默认配置
   • 创建 tailwind.css 文件，其中包含@tailwind指令
   • 安装 daisyUI
   • 将 daiysUI 添加到您的 tailwind.config.js 文件中。

3. 如果您选择第三个选项

   • 安装 Tailwind CSS
   • 创建 tailwind.config.js 文件 (npx tailwindcss init) 使用默认配置
   • 安装 PostCSS 和 Autoprefixer
   • 创建 postcss.config.js 文件
   • 将 Tailwind CSS 和 Autoprefixer 添加到 postcss.config.js
   • 安装 daisyUI
   • 将 daiysUI 添加到您的 tailwind.config.js 文件中。

我可以将它与 Yarn 或 Bun 一起使用吗？

可以。

如何使用 Yarn 初始化 Tailwind CSS 和 daisyUI

yarn create daisyui

如何使用 Bun 初始化 Tailwind CSS 和 daisyUI

bun create daisyui

您也可以使用create别名代替init在 NPM 中

npm create daisyui

它不能做什么？

1. 它不设置内容配置在tailwind.config.js文件中。 您需要自己完成，因为它取决于您的文件结构。您可以在Tailwind CSS 文档.

2. 中阅读更多相关信息。它不会将您的 CSS 文件添加到您的 HTML 中。 您需要自己完成，因为它取决于您的构建工具或打包器。 您可能想这样导入它

   import "/output.css"

   或者像这样将其放在 HTML 中

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

3. 它不会在package.json文件中添加任何脚本来构建您的 CSS 文件。 如果您使用的是打包器，它将自动处理。否则，您可能需要添加一个脚本到package.json文件中添加任何脚本来构建您的 CSS 文件。 像这样

   npx tailwindcss -i tailwind.css -o output.css

   或者这样

   npx postcss-cli tailwind.css -o output.css

源代码

当然，它是开源的，源代码在这里 https://github.com/daisyui/create-daisyui/

如果您有任何建议或反馈，请告诉我。