tailwindcss学习：1. vue项目配置 tailwindcss

官网的配置是需要一个cli去生成一份CSS，我简单总结一下更加干货的配置办法：
1.pnpm i postcss autoprefixer typescript

2.配置 postcss.config.cjs

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

3. 执行 npx tailwindcss init

4.项目的src目录下新建 index.css，放入

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

5.我用的vscode，出现了 Unknown at rule @tailwindcss(unknownAtRules)，我此时在

.vscode/settings.json 文件下加入：

{
    ....
    "css.lint.unknownAtRules": "ignore"
}

若没有这个文件，就手动创建一个,问题解决

 

在main.js/ts中引入这个css文件

此时再试试tailwindcss是否生效吧