首页 > 其他分享> > 如何安装 Tailwind CSS 解释！

如何安装 Tailwind CSS 解释！

2022-09-02 09:04:02 作者：互联网

如何安装 Tailwind CSS 解释！

这篇文章是关于如何使用 Tailwind CLI 安装 Tailwind CSS 的初学者指南。您可以通过多种方式安装 Tailwind CSS，这完全取决于您正在从事的项目类型。

在开始之前，您可能需要了解以下几点：

如果你想尝试 Tailwind CSS，顺风游戏和播放 CDN 是你弄脏手的最快方法
在框架上安装 Tailwind CSS 时，可能会有一些差异。检查框架指南部分以查找框架的安装。
TLDR： https://tailwindcss.com/docs/installation 津

使用 Tailwind CLI 安装 Tailwind CSS

我们需要的第一件事是 npm . NPM 是 JavaScript 的包管理器。将包管理器视为您可以在项目中管理其他人的代码的一种方式。我们需要它的原因是能够使用 顺风 在我们的项目中打包。

安装 Node.js 和 npm

要拥有 npm，我们需要通过安装 Node.js 来安装它。首先，我们需要检查是否安装了 Node.js 和 npm。打开命令提示符（或 PowerShell/Terminal/等），然后输入以下内容：

 节点-v

如果系统向您显示节点的版本号，那么您已经安装了节点。您可以执行相同的操作来验证 npm 安装：

 npm -v

如果你没有得到 node 和 npm 的版本号，那么你需要安装 Node.js。去 nodejs.org 并根据您的操作系统，安装 LTS 版本。

创建项目目录

在桌面内，创建一个名为 网站 .在 - 的里面 网站 文件夹，创建一个名为 源代码 我们将使用它来存储我们的网站文件。

安装 `顺风` 包裹

使用命令提示符，转到项目目录 ( 网站 文件夹）。就我而言，我将进入 cd .\桌面\网站 ：

输入以下内容进行安装 顺风 包裹：

 npm install -D tailwindcss

前两个字 npm 安装 将使用 npm 安装包。国旗 -D 告诉 npm 只在开发中安装包，而不是在生产中。最后一部分 顺风 是包名。

如果我们在 VS Code 中打开项目文件夹，会出现一个新文件夹，名为 节点模块 . 节点模块 文件夹是保存所有外部包的地方。如果我们查看文件夹，我们可以看到有一个 顺风 包含 顺风 代码。好消息是我们不会更改此文件夹中的任何内容，所有更改都使用 npm 命令进行。

文件 包.json 和 包-lock.json 也被创建。 包.json 文件包含有关项目及其使用的包的信息。 包-lock.json 包含安装了确切版本号的软件包。

Tailwind CSS 配置文件

接下来，使用以下命令创建 Tailwind CSS 配置文件：

 npx tailwindcss 初始化

npx 类似于 npm 但我们用它来执行包。我们运行的命令创建了一个新的配置文件，名为 tailwind.config.js .配置文件包含 Tailwind CSS 配置的样板。在配置文件中，我们有一个带有一些属性的 JavaScript 对象。

我们可以通过配置文件配置很多东西。目前，配置文件中唯一重要的部分是 内容 财产。这 内容 财产是告诉的方式 顺风 当它想要构建我们的 CSS 文件时要查找哪些文件。

所以在我们的例子中，我们想要 顺风 扫描所有 .html 里面的文件 源代码 文件夹。其语法将是字符串 “./src/**/*.html” .让我们分解路径，以便您知道这里发生了什么：

. ：从当前路径/文件夹（项目的根目录）开始
/src : 看看里面 源/ 文件夹
/**/ ：查看父文件夹中的所有子文件夹（ 源/ )
*.html : 我们想要的文件是任意名字的文件 ( * ) 但与 .html 仅文件扩展名。

所以这是我们配置文件的最终代码：

 /** @type {import('tailwindcss').Config} */  
 模块.exports = {  
 内容：["./src/**/*.html"],  
 主题： {  
 延长： {}，  
 },  
 插件：[]，  
 }

Tailwind CSS 指令

指令是 Tailwind CSS 的不同部分。我们还可以使用插件注册新指令。三个主要指令是：

根据 : 注入 Tailwind CSS 基础样式和注册插件的样式
成分 : 注入 Tailwind CSS 组件类和注册插件的组件类
公用事业 : 注入 Tailwind CSS 实用程序类和注册插件的实用程序类

在 - 的里面 源/ 文件夹，创建一个名为 样式.css .文件名无关紧要。 Tailwind CSS 使用这个文件作为输入来构建包含我们需要的 CSS 样式的实际 CSS 文件。

在 - 的里面 样式.css 文件，添加 Tailwind CSS 指令：

 @尾风基地；  
 @tailwind 组件；  
 @tailwind 实用程序；

构建 CSS 文件

使用命令提示符输入以下内容：

 npx tailwindcss -i ./src/style.css -o ./src/css/main.css

让我们分解一下：

npx 尾风css ：执行构建命令
-i ./src/style.css : 国旗 -一世 告诉 顺风 包是什么 输入 文件（ ./src/style.css )
-o ./src/css/main.css : 国旗 -o 告诉 顺风 包是什么 输出 文件（ ./src/css/main.css )

检查项目文件，我们可以看到我们的 main.css 文件建立。这是我们将导入到 HTML 文件中的文件。眼下， main.css 只包含 根据 样式。这是因为我们没有任何 HTML 页面供 Tailwind 扫描和添加使用的组件或实用程序类。

在 HTML 中使用 Tailwind CSS 输出文件

在 - 的里面 源/ 文件夹，创建一个名为 索引.html .导入 main.css 文件并添加一个带有一些 Tailwind CSS 类的简单按钮来测试：

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
 <title>顺风 CSS</title>  
 <link rel="stylesheet" href="css/main.css">  
 </head>  
 <body>  
 <button class="text-lg text-red-500 bg-red-200">CodeProMax</button>  
 </body>  
 </html>

保存文件并检查结果。如果你有实时服务器扩展像我一样安装，你可以用实时服务器打开文件。

该按钮没有得到我们应用的任何样式。如果我们检查 main.css 文件，我们可以看到它不包含我们应用于按钮的实用程序类。这是因为每次我们对类进行更改时，Tailwind CSS 都需要构建 main.css 带有最新更新的文件。

为了更好地理解这个过程，下面是 Tailwind CSS 的工作原理：

要生成类，我们需要再次运行 build 命令：

 npx tailwindcss -i ./src/style.css -o ./src/css/main.css

如果我们现在检查页面，我们可以看到我们的按钮已将样式应用于：

为每次更改运行相同的构建命令并不是一个好的流程。我们可以通过添加 - 手表 标记到构建命令。所以这里是构建命令 手表 旗帜：

 npx tailwindcss -i ./src/style.css -o ./src/css/main.css --watch

您可以注意到命令提示符没有完成或停止，它仍然处于活动状态。这 手表 flag 使命令提示符保持活动状态并“监视”文件是否有任何更改。一旦检测到更改，它将自动运行构建命令。

在命令提示符仍然处于活动状态时，让我们添加一个新类 字体加粗 到按钮：

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
 <title>顺风 CSS</title>  
 <link rel="stylesheet" href="css/main.css">  
 </head>  
 <body>  
 <button class="text-lg text-red-500 bg-red-200 font-extrabold">CodeProMax</button>  
 </body>  
 </html>

保存文件，刷新，我们可以看到新的变化。