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是否生效吧

 

一些可能遇到问题的解答：

1.[vite] Internal server error: Failed to load PostCSS config (searchPath: D:/test/my-leaflet-app): [ReferenceError] module is not defined in ES module scope

This file is being treated as an ES module because it has a '.js' file extension and 'D:\test\my-leaflet-app\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

出现这个问题，要么postcss.config改为cjs的，要么去掉package.json的

  "type": "module",

 

2.Internal server error: [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.

出现这个问题，你可能是用了tailwindcss4，改为tailwindcss3即可，例如：

pnpm add tailwindcss@3

 

3.vue或者react项目按照官方配置好以后不生效

看看tailwind.config.js里面的content 有没有包括jsx vue tsx这样的一些文件后缀，例如：