开始使用Tailwind CSS,如何安装Tailwind CSS - 学编程，做一名优秀的IT人

Tailwind CSS的工作原理是扫描您的所有HTML文件、JavaScript组件以及任何其他模板中的类名，生成相应的样式，然后将它们写入一个静态的CSS文件中。

开始使用Tailwind CSS
Tailwind CSS的工作原理是扫描所有HTML文件、JavaScript组件以及任何其他模板中的类名，生成相应的样式，然后将它们写入一个静态CSS文件中。
它快速、灵活且可靠，且无需运行时间。

从头开始上手使用Tailwind CSS最简单、最快捷的方法是使用Tailwind CLI工具。如果您想在不安装Node.js的情况下使用该工具，它也可以作为独立可执行文件使用。

使用 Tailwind CLI 安装 Tailwind CSS
安装 Tailwind CSS
通过npm安装tailwindcss和@tailwindcss/cli。

1、终端安装

npm install tailwindcss @tailwindcss/cli

2、在CSS中导入Tailwind
将 @import "tailwindcss"; 导入语句添加到你的主 CSS 文件中。src/input.css

@import "tailwindcss";

3、启动Tailwind CLI构建流程
运行命令行工具来扫描你的源文件中的类，并构建你的CSS。

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

4、在HTML中开始使用Tailwind
将编译后的CSS文件添加到 <head> 中，并开始使用Tailwind的实用类来为你的内容设置样式。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>