珍惜时间，勤奋学习！今天给大家带来《配置 Tailwind CSS：初始化指南 |设置 Tailwind CSS：初始化指南》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

简介 |简介

意大利语：本文有意大利语和英语版本。向下滚动查看英文版本。

英语：本文有意大利语和英语版本。向下滚动查看英文版本。

意大利语版

如何开始使用 tailwind css：项目完整指南

简介

在项目中配置 tailwind css 第一次似乎令人畏惧，特别是对于像我这样第一次尝试这个库的人来说。在本指南中，我将向您展示如何逐步初始化 tailwind 并解释要使用的主要命令，使该过程更加清晰易懂。本指南对于 tailwind 新手和已经有经验的人来说都是有用的。

1.安装 tailwind css

先决条件

确保您的系统上安装了 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 文件。

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 文件中：

4。在 html 中使用 tailwind css
现在您可以直接在 html 中使用 tailwind 实用程序。以下是如何使用 tailwind 类的示例：

  
ciao, mondo!
  
sto usando tailwind css nel mio progetto!

5。 tailwind css 的有用命令
以下是您在开发过程中可以使用的一些有用命令：

npm run build:css：编译 css 文件。
npx tailwindcss init：初始化tailwind配置文件。
npx tailwindcss build：直接从终端编译 css。

第一次设置 tailwind css 可能看起来很复杂，但是一旦您了解了该过程，它就会变得更易于管理。通过遵循这些简单的步骤，您将能够使用 tailwind css 快速启动一个新项目，并充分利用这个强大的响应式设计库。

英文版

tailwind css 入门：项目综合指南

简介

第一次设置 tailwind css 可能会让人感到畏惧，特别是对于像我这样刚接触这个实用性优先的 css 框架的人来说。在本指南中，我将引导您完成初始化 tailwind 的步骤并解释关键命令，以使该过程更加清晰易懂。本指南既可以为初学者提供服务，也可以作为经验丰富的开发人员的快速参考。

1.安装 tailwind css

先决条件

确保您的系统上安装了 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 文件中：

4。在 html 中使用 tailwind css
您现在可以直接在 html 中使用 tailwind 的实用程序类。以下是如何使用 tailwind 类的示例：

  
Hello, world!
  
I'm using Tailwind CSS in my project!

5。有用的 tailwind css 命令
以下是您在开发过程中可能会使用的一些有用命令：

npm run build:css：编译 css 文件。
npx tailwindcss init：初始化 tailwind 配置文件。
npx tailwindcss build：直接从终端构建 css。

第一次设置 tailwind css 可能看起来很复杂，但是一旦您了解了该过程，它就会变得更容易管理。通过遵循这些简单的步骤，您可以使用 tailwind css 快速启动一个新项目，并充分利用这个强大的响应式设计框架。

翻译 |翻译
本文是借助专业翻译工具翻译的。
本文是借助专业翻译工具翻译的。

本篇关于《配置 Tailwind CSS：初始化指南 |设置 Tailwind CSS：初始化指南》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！