运行顺风/ postcss

Question

我正在尝试安装 Tailwind 来练习一些基本知识，以了解该框架的工作原理。 我按照框架的创建者 Adam Wathan 提供的每一步操作，在运行时遇到命令行错误：您必须传递有效的文件列表以进行解析。 我在定义顺风自定义标记时也遇到了错误

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

首先它在规则@tailwind 上说未知，然后在安装 stylelint 并遵循@hasusuf 回答之后

出现另一个错误！

同样的命令错误仍然存​​在。

有什么帮助吗？

Answer 1

今天我尝试以最基本的方式安装 Tailwind，它成功了。我从https://tailwindcss.com/docs/installation/ 获取了大部分信息，但如果您没有使用构建工具的经验，您可能会迷失在最后一部分。

步骤如下：

1。创建index.html 和styles.css 文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="output.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="flex container mx-auto justify-center">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-8">
            Button
        </button>
    </div>
</body>
</html>

请注意，link 标签指向的是output.css，而不是styles.css（稍后我们会知道原因）。

styles.css

@tailwind base;

@tailwind components;

@tailwind utilities;

2。从命令行初始化 npm 并选择默认配置

npm init -y 或npm init 并回答所有问题。

3。从命令行安装 Tailwind

npm install tailwindcss

4。初始化一个基本的 Tailwind 配置

npx tailwindcss init

5。构建你的 css 文件

npx tailwindcss build styles.css -o output.css

您在styles.css 中编写的代码将在output.css 中输出。

6。你完成了

从浏览器打开index.html 并编辑html 或css 文件。请注意，您对 css 文件所做的每项更改都需要一个新版本 (#5)。

这不是更好的配置，但它是一个开始。

Answer 2

这个答案已经过时了。较新版本的顺风默认支持 JIT

Giorgio Tempesta 的步骤是正确的，但需要改进以获得最佳性能。

按照以下步骤以 JIT 模式（及时）实时输出到您的输出 css 文件。因此，当您处理项目时，您不需要手动编译源 css 文件。 JIT 模式还带来了动态类实现，例如 bg-[#abcaaa]

在您的 package.json 文件中将这些添加到 scripts 区域，如

 "scripts": {
    "watch-tailwind": "npx tailwindcss -i source.css -o output.css -w --minify",
    "build-tailwind": "npx tailwindcss -i source.css -o output.css --minify"
  },

---

标志含义；

-i:input file
-o:output file
-w:watch changes
--minify: minify output css file

• source.css 是您主要的巨大源 css 文件。
• output.css 是您及时编译和缩小的 css 文件。

---

你的tailwind.config.css 文件也应该看起来像这样

module.exports = {
  mode: "jit", <------------ add this for immediate compile
  purge: ["./src/**/*.html", "./src/**/*.js"], <--- give here your source files
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

在您的 package.json 运行中保存此设置后；

npm run watch-tailwind

当你运行这个 npm 脚本时，tailwind 开始监听你项目中的变化，并且只输出必要的 css 声明到你的 output.css

差别很大。在执行上述步骤之前，您的 css 文件接近 18MB

编译后将近 20-30KB

查看运行中的 JIT 模式：https://tailwindcss.com/docs/just-in-time-mode

这是顺风的新时代。

注意：JIT 模式在 v2.1+ 上可用