顺风生成结果文件很小

Question

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

我的过程

1. ->安装包，没有编辑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;

1. 创建脚本并执行

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

任何见解都值得赞赏。谢谢。

Answer 1

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

对于那些来自第2节的人来说，这是令人困惑的。改为第3节。因此，最重要的是将tailwind.config.js文件指向具有类的模板。

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

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

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

因此，我们的CSS文件不应该进入疯狂的MBs每个文件。

Answer 2

我跟踪了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就足够了。