使用 PostCSS 安装 tailwindcss v.3.0.15 无法正常工作答案

【问题标题】：installing tailwindcss v.3.0.15 using PostCSS doesn't work properly使用 PostCSS 安装 tailwindcss v.3.0.15 无法正常工作
【发布时间】：2022-02-12 02:00:41
【问题描述】：

我需要澄清一下。我正在按照https://tailwindcss.com/docs/installation/using-postcss的安装说明进行操作。

我做了什么：

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init（创建一个tailwindcss配置文件）

接下来我应该做什么：

将 Tailwind 添加到您的 PostCSS 配置 postcss.config.js
配置您的模板路径tailwind.config.js

但只有tailwind.config.js 是自动创建的。这是正常的吗？是否需要手动创建另一个文件？或者它是否暗示缺少其他东西？

*** 编辑 ***

我手动创建了postcss.config.js 并将插件添加到其中。

我将指令添加到 main.css 文件中

@tailwind base;
@tailwind components;
@tailwind utilities;

但是 h1 标题

<h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>

应该添加一个到应用程序以查看是否一切正常，表明并非一切正常，因为“Hello World”既不是粗体也不是下划线。

*** 解决方案 *** 将 .jsx 添加到可能的结尾

module.exports = {
  content: ["./src/**/*.{html,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

【问题讨论】：

您是否将tailwindcss.css 文件构建到您的app.css 文件中，以便可以在HTML 中访问它，您是否将它包含在HTML 中？您还可以验证单击 HTML 中的 css 文件会加载 CSS 文件吗？
可以分享tailwind.config.js
我只是在关注tutorial ~ 10:00 - 15:00（相关部分），使用 react、vite 和 tailwindcss，我之前没有使用此堆栈的经验。
试试，在tailwind.config.jscontent: ["./src/**/*.{html,js}"]替换成content: ["*"]，
感谢@AnmolMishra，您暗示了正确的位置。我通过为可能的文件结尾添加.jsx 解决了这个问题

标签： tailwind-css

【解决方案1】：

安装 Tailwind CSS 通过 npm 安装 tailwindcss 及其对等依赖项，并创建您的 tailwind.config.js 文件。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

将 Tailwind 添加到您的 PostCSS 配置中将 tailwindcss 和 autoprefixer 添加到您的 postcss.config.js 文件中，或者在您的项目中配置 PostCSS 的任何位置。

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

配置您的模板路径在 tailwind.config.js 文件中添加所有模板文件的路径。

tailwind.config.js

module.exports = {
  content: ["*"],
  theme: {
    extend: {},
  },
  plugins: [],
}

将 Tailwind 指令添加到您的 CSS 将 Tailwind 的每个层的 @tailwind 指令添加到您的主 CSS 文件中。

main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

开始您的构建过程使用npm run dev 或package.json 文件中配置的任何命令运行构建过程。此命令在Terminal 中运行

npm 运行开发

开始在您的 HTML 中使用 Tailwind 确保已编译的 CSS 包含在（您的框架可能会为您处理）中，然后开始使用 Tailwind 的实用程序类来设置您的内容样式。 index.html

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

【讨论】：

你只是复制了我遵循的说明，但没有帮助

【解决方案2】：

我花了一整天的时间来解决这个问题。我在下面分享我的经验：

打开你的项目文件夹并打开vscode 然后打开终端然后输入命令

npm install -D tailwindcss
npx tailwindcss init

然后创建一个 src 文件夹，其中包含input.css 文件[无论你可以给出什么名称]。然后在css文件中输入代码，如

@tailwind base;
@tailwind components;
@tailwind utilities;

之后在 src 文件夹下创建index.html。然后复制粘贴为tailwindcss doc html代码部分。然后配置您的 tailwind.config.js 内容部分

content: ["./src/index.html"],

现在运行npm init -y 之后需要更改 package.json 文件，如

"main": "tailwind.config.js",
"scripts": {
    "build": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
  },

现在运行命令

npm run build

你可以看这个video

【讨论】：