Logo

菜单

发布于 2026-01-06 4 阅读
0

如何在 Visual Studio Code 中设置 Tailwind CSS

如何在 Visual Studio Code 中设置 Tailwind CSS

本文也发布在razcodes.dev上。

Tailwind CSS官网介绍，它是一个高度可定制的底层 CSS 框架，它提供了构建定制设计所需的所有构建模块，而无需任何令人讨厌的、需要费力去覆盖的预设样式。

昨天我更新了我的网站，给它换了个新的Pelican主题，我决定用 Tailwind CSS。我觉得这是个学习新东西的好机会，而且它看起来也挺容易上手的。

与我过去使用的其他框架不同，这次需要一些设置，我想把这些步骤写下来，既是为了我自己，以便在需要时可以参考，也是为了其他可能觉得有用的人。

即使在 Visual Studio Code 中，您可以使用 UI 创建和编辑文件，我也包含了您可以在终端中运行的命令来完成此操作。

首先，你需要为你的项目创建一个新文件夹。我从自己的错误中发现，文件夹名称不能与你将要安装到该文件夹​​下的其他 npm 包的名称相同。例如，你不能将文件夹命名为 tailwindcss。所以我将文件夹命名为 tailwind-project。创建文件夹后，你就可以在 VS Code 中打开它了。

mkdir tailwind-project
cd tailwind-project
Enter fullscreen mode Exit fullscreen mode

您需要在计算机上安装 npm，如果您还没有安装，可以在这里找到安装说明。

在你的电脑上安装了 npm 之后，你需要安装一些软件包。首先是 tailwindcss，然后你需要一个处理 CSS 的工具，为此你可以安装 postcss-cli，最后你需要一个能够生成厂商前缀的工具，因为 tailwind 不会自动添加这些前缀，为此你可以使用 autoprefixer。

npm install tailwindcss postcss-cli autoprefixer
Enter fullscreen mode Exit fullscreen mode

现在你需要配置 Tailwind 和 PostCSS。为此，首先要创建 Tailwind 配置文件。

npx tailwind init
Enter fullscreen mode Exit fullscreen mode

要配置 postcss，您需要为其创建一个名为postcss.config.js的配置文件。

touch postcss.config.js
Enter fullscreen mode Exit fullscreen mode

文件内容如下：

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
    ]
}
Enter fullscreen mode Exit fullscreen mode

下一步是创建一个使用这些插件的 CSS 文件。您可以自行选择文件的名称和位置，并根据需要进行自定义。我参考了文档中的说明，在项目根目录下创建了一个名为 css 的文件夹，并在其中添加了一个名为tailwind.css的文件。

mkdir css
cd css
touch tailwind.css
Enter fullscreen mode Exit fullscreen mode

因为 Tailwind 会检查你的代码中你创建的标记，并将其替换为生成的代码，所以我们需要将以下代码添加到刚刚创建的tailwind.css文件中。代码的顺序很重要，你会在使用过程中逐渐体会到这一点，所以请确保按照这个顺序添加。

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

现在需要创建一个脚本来处理已安装的插件生成的 CSS 文件。为此，请编辑项目根目录下的package.json文件，找到代码顶部的 scripts 代码块。我们将用以下代码替换其中已有的测试脚本。

"scripts": {
    "build": "postcss css/tailwind.css -o public/build/tailwind.css"
  },
Enter fullscreen mode Exit fullscreen mode

现在是时候运行第一个构建命令了，它会调用脚本并创建初始 CSS 文件。请注意，脚本会创建一个名为public 的新文件夹，并在其中创建一个名为build的新文件夹。您将在 build 文件夹中找到这个新文件。此命令应在项目文件夹的根目录下运行。

npm run build
Enter fullscreen mode Exit fullscreen mode

接下来，在 public 文件夹中创建一个名为index.html的新 html 文件。要开始使用，你只需要在这个文件中添加指向新创建的 css 文件的链接即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Project</title>
    <link rel="stylesheet" href="build/tailwind.css">
</head>
<body>
    <h1>Hello from Tailwind CSS</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

要在 Visual Studio Code 的浏览器中查看您的项目，请确保已安装 Live Server 插件。您可以在这里找到它。右键单击 HTML 页面，然后选择“使用 Live Server 打开”。新页面将弹出，您可以开始工作。使用 Live Server 的好处在于，每次您更改并保存 HTML 文件时，浏览器中的页面都会刷新。

现在就去创造一些令人惊叹的东西吧。

文章来源：https://dev.to/razcodes/how-to-setup-tailwind-css-with-visual-studio-code-26f9
什么是多租户系统？DEV 全球展示...
替换指令开关和各种“if 和 el...