css - 顺风构建结果文件很小

Question

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

我的过程

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

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

2. postcss.config.js

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

3. 变成了index.css这样

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

4. 创建脚本并执行

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

任何见解表示赞赏。谢谢你。

Answer 1

我按照CRA+Tailwind 官方设置，发现它运行良好。我认为主要区别与配置文件有关。以下是有效的。

postcss.config.js

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

tailwind.config.js

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

执行react-scripts start就足够了。

Answer 2

看起来 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。