tailwind template

尾风CSS入门模板文档

入门

节点模块

首先，请确保在该项目的根目录中运行pnpm install 。这将安装所有必需的依赖项并生成您的node_modules文件夹。此步骤非常重要。

项目样式

尾风CSS

该项目使用Tailwind CSS，这是一个公用事业第一的CSS框架。所需的依赖项应已包含在此项目中。如果您缺少node_modules文件夹，只需运行pnpm install即可，它应该在package.json文件中指定的依赖项生成。

尾风智能

要启用tailwind CSS IntelliSense，您将需要VS代码扩展名。我建议安装Tailwind CSS扩展包，其中包含一些扩展程序，这些扩展包一起使用，以使使用Tailwind CSS成为更好的体验。要了解有关它的更多信息，请单击上面的链接。

文件

在项目的根文件夹中，有一个资产/样式文件夹。这包含tailwind.css文件。该文件最终用于生成完全编译的尾风CSS样式。一旦编译，它将将类输出到styles.css文件，也位于资产/样式文件夹中。

开发工作

要在开发环境中工作，请运行dev NPM脚本。为此，请使用下面概述的任何一种方法。

• 在项目的根文件夹中运行pnpm run dev 。
• 在VS代码中，在文件资源管理器选项卡的左下角中使用NPM脚本快捷方式。

这将启动一个长期运行的手表过程，该过程将生成按需的样式，而不是提前生成所有内容。这对于使开发更快，更高效非常有用。在终端中，您应该看到初始编译消息及其花费的时间。每当您保存html文件， tailwind.css文件或tailwind.config.js文件时，CSS都会进行处理和重新编译。这些样式将不会在开发过程中缩小。

请注意，按需添加课程，但未按需删除。这是当前的设计，如Tailwind CSS的创建者Adam Wathan所述。要围绕此操作（Cache Bust It），只需保存tailwind.css文件即可。它将迫使完整的重新编译并删除所有未使用的类。

要杀死手表过程，请将您的焦点放在该过程正在运行的终端中，然后按CTRL + C 。您应该提示您确认您对流程的终止。通过输入Y然后进行ENTER密钥来确认您的选择。

实时服务器

我们将使用VS代码扩展名来启动我们的服务器。在“ VS代码扩展”选项卡中搜索“ Live Server”。另外，您可以在Visual Studio Marketplace上找到它。

下载并安装扩展程序后，您可能会在蓝色丝带的窗口右下角看到一个新按钮。它说上线。单击它时，它应该启动服务器并在浏览器上打开。

如果您看不到该按钮，只需右键单击VS代码文件Explorer中的index.html文件，然后使用Live Server单击“打开” 。

建造生产

为生产建造类似于建造开发。执行以下任一项以构建生产的CSS。

• 在项目的根文件夹中运行pnpm run prod 。
• 在vs代码中，位于文件资源管理器选项卡左下方的NPM脚本快捷方式中执行prod 。

与我们以前使用的开发脚本相反，这不会启动长期运行的手表过程。相反，此脚本一次和一次汇编一次CSS。它将仅在Root文件夹中的HTML文件中找到的类，然后将其编译到STYLES.CSS文件中。CSS文件位于资产/样式/样式中。这些样式将被缩小。

部署项目

该项目使用Gulp来建立部署项目。通过运行Gulp，它将在您的项目根部创建一个DIST文件夹。然后，Gulp将从项目的源来复制所有必要的文件，并将资产复制到DIST文件夹中。

除此之外，Gulp还将根据需要优化和缩小文件。 HTML，SVG和JavaScript文件都将被缩小。缩小文件仅意味着删除空格和其他不必要的字符/符号。我们这样做是为了减少文件的大小。

样式（CSS）也将被复制到区域。由于CSS已经通过Tailwind CLI使用PostCSS和JIT发动机进行了缩小，因此我们不需要在此处进行更大。在运行gulp之前先运行pnpm run prod很重要。通过不这样做，Gulp将使用您的CSS的非限制版本。

图像也将在图像优化器（图像优化器）上进行复制并优化。这只会优化PNG，JPG和GIF图像。几乎所有其他图像类型都将被复制，但未进行优化，包括PDF文件。

使用Gulp

那么，您如何使用Gulp？这很容易！这是三个选项。 1）打开VS代码终端并运行命令gulp 。这将执行根目录中的Gulpfile.js文件中找到的默认任务。然后，默认任务按顺序执行所有其他任务以构建项目。 2）或者，我创建了一个名为gulp的NPM脚本。您可以在“ NPM脚本”选项卡中的VS代码窗口的左下角运行此操作。 3）如果您看不到“ NPM脚本”选项卡，则也可以通过运行pnpm run gulp在终端中运行此命令，但是那时，仅键入gulp很容易。

如果我需要其他输出文件夹名称怎么办？

如果您需要将输出文件夹的名称从Dist更改为其他内容，只需导航到Gulpfile.js文件，然后找到位于文件顶部附近的变量destination 。默认情况下，它设置为dist ，但是您可以通过将字符串的dist替换为您想要的任何东西来更改此操作。另一个常见的目标文件夹名称是docs ，该名称用于将项目部署到github页面。