顺风构建结果文件很小

Question

我正在尝试使用TailwindCSS 并遵循如下安装过程。但我得到的是一个 只有 369 行 的 tailwind.css 文件，这似乎比其他人的顺风结果文件少（并且使我无法使用顺风样式）。有没有漏点？

我的过程

1. CRA-typescript -> 安装包，没有在tailwindcss.config.js 中编辑任何东西

npm install -D tailwindcss postcss autoprefixer postcss-cli
npx tailwindcss init

1. postcss.config.js

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

1. 像这样更改index.css

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

4. 创建脚本并执行

"scripts": {
  //...
  "build:styles": "postcss src/index.css -o src/tailwind.css", 
}

感谢任何见解。 谢谢。

Answer 1

看起来 Tailwind 从 v.3.0 开始使用 JIT 范例。 他们基本上想在开发过程中摆脱大的 CSS 文件。 所以现在我们不使用 purge 在开发结束时删除所有未使用的样式，而是在开发过程中动态添加新样式。

对于那些来自 v.2 的人来说，这是令人困惑的。到 v.3。 所以最重要的是将tailwind.config.js 文件指向我们的带有类的模板。

module.exports = {
  content: ['../templates/core/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

然后在构建过程中使用 --watch 应该会自动将新样式添加到我们的主 css 文件中。

npx tailwindcss -i ./css/input.css -o ./css/style.css --watch

因此，我们的 CSS 文件不应达到每个文件的疯狂 MB。