主页 / coding / 问题 / 79423561
Accepted
Sig
Asked: 2025-02-09 00:46:09 +0800 CST

使用 TailwindCSS 独立 CLI

  • 772

我已经下载了最新的（v4.0.4）TailwindCSS 独立 CLI 并创建了以下文件。

tailwind.config.js

module.exports = {
  content: ["./index.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

tailwind.css

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

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p class="text-emerald-400 text-5xl font-bold">Lorem Ipsum</p>
  </body>
</html>

我开始用

./tailwindcss -i tailwind.css -o style.css --watch
≈ tailwindcss v4.0.4

Done in 41ms

但是，style.css我的页面中不包含样式index.html。

样式.css

/*! tailwindcss v4.0.4 | MIT License | https://tailwindcss.com */
.relative {
  position: relative;
}
.mx-auto {
  margin-inline: auto;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.w-full {
  width: 100%;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-start {
  justify-content: flex-start;
}
.object-cover {
  object-fit: cover;
}
.text-center {
  text-align: center;
}
.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, ease);
  transition-duration: var(--tw-duration, 0s);
}
.duration-700 {
  --tw-duration: 700ms;
  transition-duration: 700ms;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}

我在这里遗漏了什么？

tailwind-css

1 个回答

  1. Best Answer

    从 v4 开始，该@tailwind指令已被弃用，而应使用@import "tailwindcss";。已创建单独的 CLI 包，因此命令现在npx @tailwindcss/cli为 而不是npx tailwindcss。默认情况下，不再使用基于 JavaScript 的旧配置，但您仍可以在 v4 中使用该@config指令。

    由于您问题的某些部分已经得到单独解答，但必须在新的汇编中一起解释，因此我将在此处保留来源链接：

    • 1

相关问题