为 html 设置 Tailwindcss CLI

以下是我用来创建基本 Tailwaind 设置的步骤：

1. 在 VS Code 中打开一个新终端并导航到您要在计算机上创建项目的任何位置（这里是终端命令的一个很好的概述： “ 每个程序员都应该知道的 17 个终端命令 。”
2. 使用 mkdir 命令：“mkdir ExampleTailwind”
3. 将终端导航到该文件夹​​：“cd ExampleTailwind”
4. 创建另一个文件夹，用于存放您的源文件，例如 index.html。在终端中：“touch src”将该文件夹命名为“src”
5. 导航到那个新文件夹：“cd src”
6. 通过终端创建一个 index.html 文件：“touch index.html”——在 VS Code 中打开它并输入 “文档”，然后 它应该为您创建基本的 html 文档文本（如果没有，请查找执行此操作的扩展 - 我不确定它是哪一个）
7. 从终端创建您的主 css 文件：“touch input.css”（使用您喜欢的任何名称，但使用 input.css 作为您的 css 文件名使接下来的步骤 微小的 容易一点）
8. 通过键入“cd ..”在终端中向上导航一级（您现在应该从第 2 步返回到您的 ExampleTailwind 文件夹）
9. 从终端输入“代码”。在您刚刚创建的文件夹中打开一个 VS Code 工作区（不确定这是正确的术语）。如果“代码”。不适合你， 这个 StackOverflow 评论 可能会帮助 mac 用户。
10. 打开 吨 全部 w indCSS 的 我 安装 我 说明（我将使用“TWII”作为本文档的简写）在 https://tailwindcss.com/docs/installation （我们将使用“CLI”）
11. TWII 第一步： 通过 npm 安装 Tailwind CSS 和安装 tailwindcss，并通过键入或粘贴创建您的 tailwind.config.js 文件

11 above

12. TWII 第二步： 配置模板路径 在 tailwind.config.js 文件中添加所有模板文件的路径。 我需要这方面的帮助，发现这很有帮助：“为您的项目配置内容源”- https://tailwindcss.com/docs/content-configuration

12 above

我不是专家，但对于这个简单的 html、css 和 js 示例，我将内容设置为： 内容：[“./src/index.html”, “./src/.html”, “./src/.js”, “./src//*.{html,js}”, ],**

12 above

13. TWII 第三步： 将 Tailwind 指令添加到您的 CSS 添加 @尾风 将 Tailwind 的每个层的指令添加到您的主 CSS 文件中。

13 above

14.第四步TWII： 启动 Tailwind CLI 构建过程 运行 CLI 工具以扫描模板文件中的类并构建 CSS。

笔记： 我没有将这一步的代码粘贴到终端中，而是将其调整如下：

原始代码是：

npx tailwindcss -i ./src/input.css -o ./dist/output.css — 观看

见“ /dist “ 部分？这会在您的 ExampleTailwind 文件夹上创建一个名为“dist”的新文件夹，并将您的“output.css”文件夹放在那里。我所做的是将“dist”更改为“src”，因此 output.css 与我的 index.html 位于同一文件夹中（您可能更喜欢在 src 中创建一个 css 文件夹，这非常好）。

另外，参见 “/src/input.css” 在那行原始代码中？如果您将 css 文件创建为“input.css”，则无需更改它。但是，无论哪种方式都很容易。

所以现在，我要进入终端的是：

npx tailwindcss -i ./src/input.css -o ./src/output.css — 观看

15.第五步TWII： 开始在您的 HTML 中使用 Tailwind 将您编译的 CSS 文件添加到 并开始使用 Tailwind 的实用程序类来设置您的内容样式。

15 above

下面你会看到 ** _ _** 引用由 tailwind 生成的“output.css”（或您在上面第 14 步中命名的任何名称）样式表。

15 above (probably do not need to ref input.css)

16.（可选）当您准备好部署站点时，缩小您的 css，使文件更小，加载更快：

• 打开你的“output.css”文件
• 复制全部内容
• 转到缩小代码的站点，例如 https://refresh-sf.com/

https://refresh-sf.com/

• 粘贴你的CSS并点击右上角的“CSS”按钮

minified CSS

• 上面是缩小的 CSS，您可以通过单击右上角的蓝色“保存”按钮将其下载为文件（考虑将其命名为与 output.css 文件相同，但在 中间 ，因此文件名将是“output.min.css”（将其保存到与“output.css”相同的位置）
• 将步骤 15 中的引用更改为新文件名： ** _ _**
• 我刚刚注释掉了引用 output.css 的行并为 output.min.css 添加了一个新行，因此当我进行更改时，我可以参考 Tailwind 不断更新的样式表。

而已！

我最近的项目： Zagnetic.com , 优步周刊 和 Careerasaurus.com

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/11734/31150315