简介 |简介 意大利语：本文有意大利语和英语版本。向下滚动查看英文版本。 英语：本文有意大利语和英语版本。向下滚动查看英文版本。
在项目中配置 tailwind css 第一次似乎令人畏惧，特别是对于像我这样第一次尝试这个库的人来说。在本指南中，我将向您展示如何逐步初始化 tailwind 并解释要使用的主要命令，使该过程更加清晰易懂。本指南对于 tailwind 新手和已经有经验的人来说都是有用的。
确保您的系统上安装了 node.js 和 npm。您可以使用以下命令检查版本：
node -v npm -v
如果没有安装，可以从官网下载node.js：https://nodejs.org/
第 1 步：创建项目
为您的项目创建一个新文件夹，并使用 npm 初始化 node.js 项目：
mkdir nome-del-progetto cd nome-del-progetto npm init -y
此命令将创建一个 package.json 文件来管理项目依赖项。
第 2 步：安装 tailwind css
通过 npm 安装 tailwind css：
npm install -d tailwindcss
安装后，通过运行以下命令创建 tailwind 配置文件：
npx tailwindcss init
该命令会在项目根目录生成一个 tailwind.config.js 文件。
立即学习“前端免费学习笔记（深入）”；
现在 tailwind 已安装，我们需要设置项目的主 css 文件。在项目文件夹中创建 input.css 文件并添加以下 tailwind 指令：
@tailwind base; @tailwind components; @tailwind utilities;
这告诉 tailwind 包含其基本样式、组件和实用程序。
第 3 步：配置构建文件
在 package.json 文件中，添加脚本来创建已编译的 css。像这样编辑脚本部分：
"scripts": {
"build:css": "tailwindcss build input.css -o output.css"
}
此命令会将 input.css 文件编译为 output.css 文件，准备好包含在您的 html 页面中。
3。使用 tailwind 创建 css
现在您可以通过运行以下命令来构建 css 文件：
npm run build:css
这将在根目录中创建output.css 文件。确保将其包含在您的 html 文件中：
<link href="output.css" rel="stylesheet">
4。在 html 中使用 tailwind css
现在您可以直接在 html 中使用 tailwind 实用程序。以下是如何使用 tailwind 类的示例：
<div class="bg-blue-500 text-white p-4"> <h1 class="text-2xl font-bold">ciao, mondo!</h1> <p class="mt-2">sto usando tailwind css nel mio progetto!</p> </div>
5。 tailwind css 的有用命令
以下是您在开发过程中可以使用的一些有用命令：
npm run build:css：编译 css 文件。
npx tailwindcss init：初始化tailwind配置文件。
npx tailwindcss build：直接从终端编译 css。
第一次设置 tailwind css 可能看起来很复杂，但是一旦您了解了该过程，它就会变得更易于管理。通过遵循这些简单的步骤，您将能够使用 tailwind css 快速启动一个新项目，并充分利用这个强大的响应式设计库。
第一次设置 tailwind css 可能会让人感到畏惧，特别是对于像我这样刚接触这个实用性优先的 css 框架的人来说。在本指南中，我将引导您完成初始化 tailwind 的步骤并解释关键命令，以使该过程更加清晰易懂。本指南既可以为初学者提供服务，也可以作为经验丰富的开发人员的快速参考。
确保您的系统上安装了 node.js 和 npm。您可以使用以下命令验证它们的版本：
node -v npm -v
如果没有安装，请从官网下载node.js：https://nodejs.org/
第 1 步：创建项目
为您的项目创建一个新文件夹，并使用 npm 初始化 node.js 项目：
mkdir project-name cd project-name npm init -y
此命令将创建一个 package.json 文件来管理项目依赖项。
第 2 步：安装 tailwind css
通过 npm 安装 tailwind css：
npm install -d tailwindcss
安装后，通过运行以下命令创建 tailwind 配置文件：
npx tailwindcss init
这将在项目的根目录中生成一个 tailwind.config.js 文件。
2。配置 tailwind css
现在 tailwind 已安装，我们需要配置项目的主 css 文件。在项目文件夹中创建 input.css 文件并添加以下 tailwind 指令：
@tailwind base; @tailwind components; @tailwind utilities;
这告诉 tailwind 包含其基本样式、组件和实用程序。
第 3 步：配置构建文件
在package.json中，添加一个脚本来生成编译后的css。修改脚本部分如下：
"scripts": {
"build:css": "tailwindcss build input.css -o output.css"
}
此命令会将 input.css 文件编译为 output.css 文件，准备好包含在您的 html 页面中。
3。使用 tailwind 构建 css
现在，通过运行构建 css 文件：
npm run build:css
这将在根目录中生成output.css 文件。确保将其包含在您的 html 文件中：
<link href="output.css" rel="stylesheet">
4。在 html 中使用 tailwind css
您现在可以直接在 html 中使用 tailwind 的实用程序类。以下是如何使用 tailwind 类的示例：
<div class="bg-blue-500 text-white p-4"> <h1 class="text-2xl font-bold">Hello, world!</h1> <p class="mt-2">I'm using Tailwind CSS in my project!</p> </div>
5。有用的 tailwind css 命令
以下是您在开发过程中可能会使用的一些有用命令：
npm run build:css：编译 css 文件。
npx tailwindcss init：初始化 tailwind 配置文件。
npx tailwindcss build：直接从终端构建 css。
第一次设置 tailwind css 可能看起来很复杂，但是一旦您了解了该过程，它就会变得更容易管理。通过遵循这些简单的步骤，您可以使用 tailwind css 快速启动一个新项目，并充分利用这个强大的响应式设计框架。
翻译 |翻译
本文是借助专业翻译工具翻译的。
本文是借助专业翻译工具翻译的。