简介 |简介意大利语：本文有意大利语和英语版本。向下滚动查看英文版本。英语：本文有意大利语和英语版本。向下滚动查看英文版本。
意大利语版
如何开始使用 tailwind css：项目完整指南
简介
在项目中配置 tailwind css 第一次似乎令人畏惧，特别是对于像我这样第一次尝试这个库的人来说。在本指南中，我将向您展示如何逐步初始化 tailwind 并解释要使用的主要命令，使该过程更加清晰易懂。本指南对于 tailwind 新手和已经有经验的人来说都是有用的。
1.安装 tailwind css
先决条件
确保您的系统上安装了 node.js 和 npm。您可以使用以下命令检查版本：
node -vnpm -v
如果没有安装，可以从官网下载node.js：https://nodejs.org/
第 1 步：创建项目
为您的项目创建一个新文件夹，并使用 npm 初始化 node.js 项目：
mkdir nome-del-progettocd nome-del-progettonpm 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 -vnpm -v
如果没有安装，请从官网下载node.js：https://nodejs.org/
第 1 步：创建项目
为您的项目创建一个新文件夹，并使用 npm 初始化 node.js 项目：
mkdir project-namecd project-namenpm 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：初始化指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630010.html
微信扫一扫 
支付宝扫一扫 
