配置 Tailwind CSS：初始化指南 |设置 Tailwind CSS：初始化指南

php中文网 2024-10-15 12:28:27

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

意大利语版

如何开始使用 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 文件中：

<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 入门：项目综合指南

简介

第一次设置 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 文件中：

<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。